将vue项目打包为桌面应用程序（electron + vue-cli3）

记录一次利用electron将vue项目打包为桌面应用程序的步骤，测试项目为毕业设计项目，基于vue-cli3进行开发。

ps:还可以通过PWA和nw.js进行操作，暂时未深入研究

打包步骤

打包自己的项目

通过npm run build命令打包我们自己的项目，生成一个dist文件夹

注意：运行此命令之前我们需要修改公共路径为相对路径，防止 npm run build 后出现白屏情况

方法：新建一个vue.config.js文件，修改publicPath路径。如果是vue-cli2项目，则修改config文件夹下面的index.js文件的assetsPublicPath

module.exports = {
  publicPath: './'
}

 
 

克隆electron的官方示例到本地

electron官方网站

git clone https://github.com/electron/electron-quick-start 

 
 

修改克隆示例项目的内容

• 删除克隆项目根目录下的 index.html 文件，然后将打包完成的dist文件夹拷贝到克隆的electron项目中，如下图：
  
• 修改main.js文件中的内容（打包的文件路径）

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html') 

• 安装依赖并预览

// 安装依赖(如果下载太慢，可以将镜像源设置为淘宝的镜像源)
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install

// 正常情况执行此命令后便可以预览打包后的效果，若有问题，检查配置是否有误
npm run start

• 在当前克隆项目下载打包依赖electron-packager

npm install electron-packager --save-dev 

• 配置package.json文件

  "scripts": {
    "start": "electron .",
    // 添加packager命令，其中icon为打包后的exe文件图标，不配置(直接删除)则为默认图标
    "packager": "electron-packager ./ community --platform=win32 --arch=x64 --icon=./dist/bitbug_favicon.ico --overwrite" 
  },

ps：记得删除JSON文件中的注释

• 运行命令打包

npm run packager

执行命令后当前项目下会生成一个xxx-win32-x64的文件，.exe启动文件就在里面

 
 
 
 

封装安装包

若要将启动文件封装成安装包，可以进行百度，有很多方法可以办到，此处推荐 Inno Setup 作为封装工具。
大佬详细教程

 
 
 
 

packager打包命令解释

"packager": "electron-packager ./ community --platform=win32 --arch=x64 --icon=./dist/bitbug_favicon.ico --overwrite" 

• “win32”： 自己任意指定的名字;

• “electron-packager”: 指定使用electron-packager进行打包;

• “./”: 一般是指package.json的位置;

• “community”：app name，可任意更改

• “–platform”: 系统取值为: “win32”,“linux”,“mas”,"darwin"还有其他的一些;

• “–arch”: 系统取值为: “ia32”,“x64”,“armv7l”,"arm64"还有其他的一些;

• “–out”: 打包完的可执行文件放在那里;

• “–overwrite”: 是否覆盖原有的生成文件;

• “–asar”: 生成.asar文件，不加则不生成;

• “–icon”: 设置打包的时候的图标;

• “–ignore”: 要排除掉的不打包文件;

• “–extra-resource”: 可以将第三方资源，在打包的时候，复制到打包后resource目录下

• “appname”: 打包完毕的可执行文件名

 
 
 
博文参考：
electron官方文档
https://zhuanlan.zhihu.com/p/449443615
https://www.jianshu.com/p/6358fb6e84f5
https://www.cnblogs.com/xufeikko/p/10559444.html