vue 项目集成 electron 和 electron 打包及环境配置方法

(后续会上传相关基础框架和代码)
将 Vue 项目集成到 Electron 中并进行打包，可以让你创建一个跨平台的桌面应用程序。以下是详细的步骤和配置方法：

1. 安装 Electron 及相关依赖

在 Vue 项目中安装 Electron 及其构建工具：

npm install electron --save-dev
npm install electron-builder --save-dev

2. 配置 Electron

在项目根目录下创建 main.js 或者在根目录下先创建electron文件夹将相关文件存放到此文件夹下，这是 Electron 的主进程文件：

// main.js
// 导入 Electron 模块、路径模块和 electron-reload 模块
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');
const electronReload = require('electron-reload');

// 声明主窗口变量
let mainWindow = null;

/**
 * 创建主窗口
 */
function createWindow() {
  // 创建 BrowserWindow 实例，并配置窗口属性
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 禁用 Node.js 集成
      contextIsolation: true, // 启用上下文隔离
      enableRemoteModule: false, // 禁用远程模块
    },
  });
  // 根据环境变量决定加载方式
  const env = getEnvironment();
  if (env === 'development') {
    try {
      // 开发环境下使用 electron-reload 实现热更新
      const elePath = path.join(__dirname, '../node_modules/electron');
      electronReload('../', {
        electron: require(elePath),
      });
    } catch (error) {
      console.error('electron-reload 初始化失败:', error);
    }
    // 加载本地开发服务器的 URL
    mainWindow.loadURL('http://localhost:8080')
      .catch((err) => console.error('加载开发环境 URL 失败:', err));

    // 打开开发者工具
    mainWindow.webContents.openDevTools();
  } else if (env === 'production') {
    // 生产环境下加载打包后的 HTML 文件
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))
      .catch((err) => console.error('加载生产环境文件失败:', err));
  } else {
    console.error('未知的环境变量:', env);
  }
}
function getEnvironment() {
  const env = process.env.ELECTRON_ENV;
  if (!env || !['development', 'production'].includes(env)) {
    console.warn('环境变量 ELECTRON_ENV 未定义或无效，默认设置为 production');
    return 'production';
  }
  return env;
}

// 单实例锁
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    focusMainWindow();
  });

  // 当 Electron 初始化完成时创建窗口
  app.whenReady().then(() => {
    createWindow();

    // macOS 上，当用户点击 dock 图标并且没有其他窗口打开时，重新创建一个窗口
    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
  });
}

// 当所有窗口关闭时退出应用
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

/**
 * 聚焦主窗口
 */
function focusMainWindow() {
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();
    mainWindow.show();
  }
}

3. 修改 package.json

在 package.json 中添加 Electron 的启动脚本和构建配置："main": "electron/main.js",

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "main": "electron/main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:serve": "vue-cli-service build && electron .",
    "electron:build": "vue-cli-service build && electron-builder"
  },
}

4.在根目录新建electron-builder.json

{
    "appId": "id",
    "productName": "el-system",
    "files": ["./electron/main.js", "./dist"],
    "extraFiles": ["./videos", "./cvideo"],
    "directories": {
      "output": "./buileder"
    },
    "win": {
      "target": ["nsis","zip"]
    },
    "appx": {
      "publisher": "名字"
    },
    "nsis": {
  "oneClick": false, 
  "perMachine": false, 
  "allowElevation": true,
  "allowToChangeInstallationDirectory": true, 

  "createDesktopShortcut": true, 
  "createStartMenuShortcut": true,
  "runAfterFinish": true, 
  "shortcutName": "client-ico"
}
  }

5. 安装 vue-cli-plugin-electron-builder

这个插件可以帮助简化 Electron 的集成和构建过程：

vue add electron-builder

6. 运行和打包

运行 Electron 应用，如用热更新可以再安装npm i electron-reload

npm run electron:serve

打包 Electron 应用

npm run electron:build

打包完成后，生成的安装包会位于 builder 目录下。

7. 配置注意事项

1. 环境变量

确保在 Electron 中正确处理环境变量。可以在 main.js 中设置环境变量：

process.env.NODE_ENV = 'production';

2. 安全设置自己实验或者小型项目没必要

为了安全起见，建议启用 contextIsolation 并使用 preload 脚本：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    }
  });

  mainWindow.loadURL(
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:8080'
      : `file://${path.join(__dirname, '../dist/index.html')}`
  );

  mainWindow.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

创建 preload.js 文件：

// preload.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

3. 调试

在开发过程中，确保使用 mainWindow.webContents.openDevTools(); 打开开发者工具，以便调试 Electron 应用。