使用Electron打包VUE项目为Windows/Mac跨平台桌面应用

一、使用 electron 打包vue项目在桌面运行

1. 将electron官方快速开始示例demo下载到本地 electron-quick-start

2. 将demo中的main.js复制到vue项目里的build目录下并重命名为electron.js

3. 修改electron.js中的mainWindow.loadFile路径

    // 修改为'../dist/index.html'
    mainWindow.loadFile('../dist/index.html')
   

4. 修改config目录中index.js文件 assetsPublicPath 为 ./

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

5. 项目根目录下package.json中scripts添加 electron-dev 运行脚本命令

   "scripts": {
   "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
   "start": "npm run dev",
   "unit": "jest --config test/unit/jest.conf.js --coverage",
   "e2e": "node test/e2e/runner.js",
   "test": "npm run unit && npm run e2e",
   "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
   "build": "node build/build.js",
   
   // 添加运行脚本 electron-dev
   "electron-dev": "npm run build && electron build/electron.js"
   }
   

6. 在终端中运行如下命令启动项目

   //使用淘宝源cnpm
   $ npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
   $ cd vue-project
   $ cnpm install
   // 安装electron
   $ cnpm install electron --save-dev
   $ npm run electron-dev
   

二、打包生成exe可安装文件

1. 复制build目录下的electron.js到dist目录中，注意修改路径

    // 修改为'index.html',dist下的electron.js和index.html同级
    mainWindow.loadFile('index.html')
   

2. 复制demo示例中的package.json到dist目录中,注意修改路径 使用electron 将web页面(vue-cli)打包为桌面应用 "main": "electron.js"

3. 在项目根目录下的package.json中增加一条打包启动命令

   "electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --icon=./src/assets/home.ico --overwrite"   //增加这条
   

4. 执行命令生成exe

   $ cnpm install electron-packager
   $ npm run electron_build
   

5. 下载安装Resource Hacker,在.exe文件上鼠标右键，更换图标后保存即可

参考：

使用 Electron 打包 Vue 项目