使用 Electron 将 Vue 项目打包成客户端

Posted 2021-09-13 墨风岚

参考博客：https://blog.csdn.net/jabony/...

安装 Vue cli

1.安装 vue cli4.x 全局环境

npm install -g @vue/cli

2.创建 vue 项目（自己找个方便的文件目录创建项目）

vue create hello-world（项目名称）
cd hello-world //进入项目根目录
npm install //安装依赖
npm run serve //运行项目

3.打包 vue 项目
在根文件目录的 vue.config.js 文件里（没有就自己创建），修改输出文件路径，例如：

module.exports = {
  publicPath: "./",
  outputDir: \'dist\'
}

然后执行打包命令，

npm run build

就可以得到打包后的文件夹 dist。

使用 Electron

使用 electron，用打包后的 dist 文件生成客户端。
1.安装 electron 依赖

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

2.在 dist文件夹内添加 electron.js 和 package.json 文件
dist/electron.js

const electron = require(\'electron\')
const path = require(\'path\')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷键

let mainWindow
const Menu = electron.Menu

function createWindow () {
 
    Menu.setApplicationMenu(null)
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 980,
        height: 640
    })
 
    // 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 () {
        mainWindow = null
    })
 
    // 通过快捷键就可以打开调试模式 ctrl + shift + l
    globalShortcut.register(\'CommandOrControl+Shift+L\', () => {
        let focusWin = BrowserWindow.getFocusedWindow()
        focusWin && focusWin.toggleDevTools()
    })
}

app.on(\'ready\', createWindow)
 
// Quit when all windows are closed.
app.on(\'window-all-closed\', function () {
    if (process.platform !== \'darwin\') app.quit()
})
 
app.on(\'activate\', function () {
    if (mainWindow === null) createWindow()
})

dist/package.json

{
  "name": "项目名称",
  "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"
  }
}

3.修改根文件的 package.json，添加 electron_build 命令，如下：

"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 --overwrite"
  },