Vue：使用electron将Vue项目打包为Windows应用（.exe）

一、下载electron的官方例子进行修改

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

二、修改路径

1.打开vue.config.js中，把publicPath的值"/“改为”./"

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
  },

2.打开build/index.js，把"/“改为”./"

app.use(
    publicPath,
    serveStatic('./dist', {
      index: ['index.html', './']
    })
  )

三、vue项目编译生成dist

npm run build 

四、修改前面下载的官方例子

1.删除根目录下的index.html文件
2.修改main.js

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

五、效果预览

// 国内网络下载electron可能很慢，建议设置
// 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 中添加 packager 指令

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
} 

如果你想修改最后打包出来的exe文件图标，类似于favicon，或者EXE的名字，可以设置 packager 的指令内容为

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

八、运行命令打包

项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件：

npm run packager