使用electron 将vue-cli3.x项目打包为桌面应用

我有个模版项目是用vue-cli3.x开发的，测试部署已经没问题，突发奇想，能不能打包成exe文件，在桌面运行，开始鼓捣。

1.先将项目打包

yarn build
  

2.安装electron和electron-packager

       yarn add electron
       yarn add electron-packager
   
  

3.dist目录新建main.js文件，内容如下：

       const {
         app,
        BrowserWindow,
        Menu
       } = require('electron')
       function createWindow() {
        // 去掉菜单
        Menu.setApplicationMenu(null)
        // 创建浏览器窗口
        const win = new BrowserWindow({
          width: 800,
          height: 600,
          webPreferences: {
            nodeIntegration: true
           }
         })
        // 并且为你的应用加载index.html
         win.loadFile('index.html')
        // 打开开发者工具
        // win.webContents.openDevTools()
       }
       // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
       // 部分 API 在 ready 事件触发后才能使用。
       app.whenReady().then(createWindow)
       //当所有窗口都被关闭后退出
       app.on('window-all-closed', () => {
        // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
        // 否则绝大部分应用及其菜单栏会保持激活。
        if (process.platform !== 'darwin') {
           app.quit()
         }
       })
       app.on('activate', () => {
        // 在macOS上，当单击dock图标并且没有其他窗口打开时，
        // 通常在应用程序中重新创建一个窗口。
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow()
         }
       })
       // 您可以把应用程序其他的流程写在在此文件中
       // 代码 也可以拆分成几个文件，然后用 require 导入。
   
  

   
  
  

注：可以从electron官网clone例子，复制main.js

4.dist目录新建package.json文件，内容如下：

       {
         "name": "electron-quick-start",
         "version": "1.0.0",
         "description": "A minimal Electron application",
         "main": "main.js",
         "scripts": {
           "start": "electron .",
           "package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
         },
         "repository": "https://github.com/electron/electron-quick-start",
         "keywords": [
           "Electron",
           "quick",
           "start",
           "tutorial",
           "demo"
         ],
         "author": "GitHub",
         "license": "CC0-1.0",
         "devDependencies": {
           "electron": "^9.0.0"
         },
         "dependencies": {
           "electron-packager": "^14.2.1"
         }
       }
   
  

   
  
  

注：可以从electron官网clone例子，复制package.json

5.在项目的根目录的package.json增加一条启动命令

       "scripts": {
          "serve": "vue-cli-service serve --copy",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint",
          "electron_dev": "yarn build && electron main.js",
          "electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --overwrite"
         },
   
  

注：

• sourcedir: 资源(dist/package.json)路径，在本例中既是./dist/

• appname:打包出的exe名称,这里取名为helloworld

• platform :平台名称（windows是win32）

• arch: 版本，本例为x64

6.生成exe

yarn  electron_build
  

可以看到项目目录中多了一个helloworld-win32-x64文件，找到里面的helloworld.exe运行即可。

运行效果