一步步使用electron把vue打包成客户端

一、客户端网页预览

1.新建一个vue项目

（我的项目运行在8080端口，所以下面使用到的端口号都是8080，不一致请自行修改）

2.安装electron,我下载的版本是16.0.0,如果npm下载路径404的话切换成cnpm安装就行

cnpm install -D electron@16.0.0

3.在项目根目录新建一个electron文件夹，文件夹下存放两个文件：main.js(主进程)、preload.js（渲染进程）

const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;

function createWindow() {
  Menu.setApplicationMenu(null);
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    show: false,
    minWidth: 1440,
    minHeight: 900,
    webPreferences: {
      partition: String(+new Date()),
      preload: path.join(__dirname, "preload.js"),
    },
  });
  mainWindow.maximize();
  mainWindow.show();
  // 如果是开发环境就把当前运行的web端口做成客户端预览
  // 如果是生产环境就把打包后的index做成客户端预览
  mainWindow.loadURL(
    NODE_ENV === "development"
      ? "http://localhost:8080"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

4.在vue.config.js中配置基本路径为./，防止打包之后页面空白

5.在package.json文件中配置入口文件，配置一下运行命令

6.为了使项目和electron正常运行，需要先运行项目，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。

此处需要安装两个库：

• cross-env：该库让开发者只需要注重环境变量的设置，而无需担心平台设置
• wait-on：等待资源，此处用来等待url可访问

7.配置完成这些之后运行刚才配置的electron命令

wait-on tcp:8080 && cross-env NODE_ENV=development electron .

二、打包生成客户端安装包

1.安装electron-builder

cnpm install -D electron-builder

2.配置electron打包命令和配置项，将下面这段代码放到page.json的大括号里面，跟dependencies同级

"build": {
    "appId": "com.test",
    "productName": "electron打包测试",
    "copyright": "Copyright © 2023",
    "mac": {
      "category": "public.app-category.utilities",
      "icon": "public/icons/icon.icns"
    },
    "win": {
      
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }

3.在根目录下新建一个.env.production文件配置环境

NODE_ENV='production'
# 设置生产环境地址
VUE_APP_BASE_API='http://xxx.xxx.xxx.xxx:xxxx'

4.如果打包过程有报错，重新安装一遍electron即可

5.打包完成后再dist_electron文件夹下会有.exe安装包，点击安装即可

结束！