用electron将vue项目打包成桌面应用程序.exe

vue项目引入electron，将项目打包成桌面应用程序

1、在vue项目里下载electron相关依赖

npm install electron --save-dev
npm install electron-packager --save-dev

2、在项目的根目录下新建electron.js和preload.js两个文件

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}
const gotTheLock=app.requestSingleInstanceLock();   //判断打开应用程序时，是否已经打开了，若是，则不重复执行
if(!gotTheLock) {
  app.quit()
}else {
  app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
}
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

上面的electron.js文件，其实就是在Git上拉下来的electron快速入门的demo，把里面的main.js复制到vue项目中，名字改为electron.js，然后改一下里面的路径就行

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

关于preload.js，里面可以为空，为了后续对electron做一些配置

3、 vue项目里根目录下的vue.config.js文件，publicPath务必改为’./’

4、 在vue项目package.json文件中增加两条指令

"electron_dev": "npm run build && electron electron.js",
"electron_build": "electron-packager ./dist untilCloud-07 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"

注意：“electron_build”里的./dist，要根据自己实际打包生成的文件夹来定，名字、路径都不能错
此时，运行上面两条指令是不会成功的，还需在打包生成的dist文件夹中新增几个文件

5、 复制electron.js、preload.js到dist目录中，并注意修改路径

6、 如果下载了electron的快速入门demo的，直接将demo例子中的package.json复制到dist目录中,注意修改路径

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^11.1.1"
  }
}

7、 最后运行npm run electron_build，vue项目目录中会多出一个untilCloud-07-win32-x64文件，找到里面的untilCloud-07.exe运行即可