vue-cli3 + electron vue项目打包成桌面客户端

旧城等待， 2021-09-15 06:34 1056阅读 0赞

### 1.vue-cli3创建vue项目 ###

vue create electron-app

### 2.安装依赖，运行 ###

cd electron-app
    npm install

### 3.安装electron及打包插件 ###

npm i -D electron@latest
    npm i -D electron-packager

### 4.编译打包vue项目 ###

vue项目根目录下新建vue.config.js改变打包后静态资源文件路径

module.exports = {
        publicPath: './'
    }

再编译打包vue项目

npm run build

### 5.打包生成桌面客户端 ###

在打包vue后的dist文件夹下增加electron.js和package.json  
electron.js

// Modules to control application life and create native browser window
    const electron = require('electron')
    const path = require('path')
    
    const app = electron.app
    
    const BrowserWindow = electron.BrowserWindow
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let mainWindow
    const Menu = electron.Menu
    
    function createWindow () {
      
      Menu.setApplicationMenu(null)
      // Create the browser window.
      mainWindow = new BrowserWindow({
        width: 800,
        height: 600
      })
    
      // and load the index.html of the app.
      mainWindow.loadFile('index.html')
    
      // Open the DevTools.
      // mainWindow.webContents.openDevTools()
    
      // Emitted when the window is closed.
      mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
      })
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow)
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function () {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') app.quit()
    })
    
    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 (mainWindow === null) createWindow()
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.

package.json

{
      "name": "electron-app",
      "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": "^6.0.12"
      }
    }

vue项目根目录下的package.json添加打包客户端命令

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite" // 打包客户端命令
      },

运行

npm run electron_build