使用electron 将vue-cli打包为桌面应用

步骤一：从官网clone一个例子

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

cd electron-quick-start

npm install

npm start

项目跑起来之后，将文件main.js复制起来粘贴在你的项目的根目录下

image

步骤二：修改main.js文件

main.js页面修改1：添加一下代码

const path = require('path')

const url = require('url')

main.js页面修改2：将下面代码修改，按照实际项目路径更改main.js中的路径

mainWindow.loadFile('../dist/index.html')

改为：

const startUrl = url.format({

  pathname: path.join(__dirname, './dist/index.html'),

  protocol: 'file:',

  slashes: true

});

mainWindow.loadURL(startUrl);

步骤三：修改config/index.js中生产模式下（build）的assetsPublicPth, 原本为 /, 改为 ./

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',         //改这里
    ....
}

步骤四：修改package.json文件
添加文件入口

"main": "main.js",

添加打包的文件入口

  "scripts": {
    "electron": "electron .",
    "packager": "electron-packager ./ myElectron --platform=win32 --arch=x64 --out ./ "
  },

注：
配置Mac系统
"package": "electron-packager ./ myElectron --arch=x64 --out ./ "
配置安卓系统
"package": "electron-packager ./ myElectron --platform=win32 --arch=x64 --out ./ "

步骤五：在你的项目中引入electron

cnpm install electron --save-dev
cnpm install electron-packager --save-dev //这个是打成exe文件的插件，之后要用，提前下载好

注：
1、如果在你的原来项目中配置了开发环境的跨域代理配置，需要把代理关掉，这样打包成exe的时候才不会出错
2、若执行npm run packager仍无法打包，卡住在Packaging app for platform win32 x64 using electron v2.0.12久久不动但未报错，是存在版本问题，是你的electron版本太新，为避免这个问题，可先执行npm run electron再执行npm run packager即可
以上就完成了设置
接下来只要运行npm start就是打开网页版，运行npm run electron就是打开应用