Electron 给现有Vue项目打包成软件包

之前的同事入坑Electron，那我也顺便学习一下

环境

目前只对Vue 2.0项目进行学习，其他版本并未进行测试。

• Vue 项目
• Vue CLI 3.0+

添加依赖库

其实就这一句就搞定了，不过凡事多多少少都会有一些问题。

vue add electron-builder

当需要选择版本时，选择最新的即可（我这里选择的是^13.0.0）。

安装完成后，对应的package.json文件中会多些内容。

构建

npm run electron:build

出现网络问题时

由于要访问https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-win32-x64.zip所以可能网络不支持。

重新运行命令

https://www.jianshu.com/p/9d7a786fb9f6

新建vue.config.js文件

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        electronDownload: {
          mirror: "https://npm.taobao.org/mirrors/electron/",
        },
      },
    },
  },
};

效果

构建成功后，dist_electron 文件夹中该会生成出来一个.exe 后缀的程序。

打开效果如下

如果是白屏

可能需要增加路由默认跳转

例如:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '**',
    redirect: '/'
  }
]

源码

https://github.com/linyisonger/Vue.Examples