環境： node v20.18.0 npm 11.1.0

用到的所有依賴：

  "dependencies": {"core-js": "^3.8.3","vue": "^3.2.13","vue-router": "^4.5.0"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","cross-env": "^7.0.3","dotenv-webpack": "^8.1.0","electron": "^35.0.0","electron-builder": "^25.1.8","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3"},

安裝@vue/cli

// 已經安裝可以忽略
npm install -g @vue/cli

創建一個新的 Vue 項目

vue create my-electron-vue-app

• 進入項目目錄

cd my-electron-vue-app

• 修改vue.config.js

// 加上這個，build后，發布的頁面不會出現白板
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
};

添加Electron鏡像地址

添加.npmrc文件，里面加上。不配置這個會有很多electron相關的文件下載不了。

electron_mirror=https://npmmirror.com/mirrors/electron/

安裝 Electron

npm install electron --save-dev

• 創建Electron入口文件main.js

mkdir electron
touch electron/main.js

// electron/main.js
// app 模塊，它控制應用程序的事件生命周期。
// BrowserWindow 模塊，它創建和管理應用程序 窗口。
const { app, BrowserWindow, ipcMain } = require('electron')
// 部引入 Node.js 中的 path 模塊
const path = require('path')const process = require('process')// 添加一個createWindow()方法來將index.html加載進一個新的BrowserWindow實例
function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,//預加載// __dirname 字符串指向當前正在執行腳本的路徑 (本項目，指向項目的根文件夾)。// path.join API 將多個路徑段聯結在一起，創建一個跨平臺的組合路徑字符串。preload: path.join(__dirname, 'preload.js')}})// and load the index.html of the app.if (process.env.NODE_ENV === 'development') {mainWindow.loadURL('http://localhost:8080');// Open the DevTools.// mainWindow.webContents.openDevTools()} else {mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));}}// 在 Electron 中，只有在 app 模塊的 ready 事件被激發后才能創建瀏覽器窗口。 
// 您可以通過使用 app.whenReady() API來監聽此事件。 
// 在whenReady()成功后調用createWindow()。
app.whenReady().then(() => {createWindow()app.on('activate', function () {// 在macOS上，當單擊dock圖標并且沒有其他窗口打開時，通常會在應用程序中重新創建一個窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 在Windows和Linux上，關閉所有窗口通常會完全退出一個應用程序。
// 為了實現這一點，監聽 app 模塊的 'window-all-closed' 事件，
// 并在用戶不是在 macOS (darwin) 上運行時調用 [app.quit()][app-quit]
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

• 創建Electron預加載文件preload.js

touch electron/preload.js

// electron/preload.js
/*** 預加載* 預加載腳本在渲染器進程加載之前加載，并有權訪問兩個 渲染器全局 (例如 window 和 document) 和 Node.js 環境(例如 process)*/ 
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])}
})

• 修改package.json

// package.json
{...// 加入"main": "electron/main.js""main": "electron/main.js","scripts": {...// 本地啟動命令electron:serve"electron:serve": "set NODE_ENV=development&& electron ."},...
}

安裝Electron打包程序electron-builder

npm install electron-builder --save-dev

• 修改package.json添加命令及build配置

// package.json
{..."scripts": {..."electron:build": "set NODE_ENV=production&& electron-builder"},// electron打包配置"build": {"appId": "com.example.yourapp","productName": "YourApp","directories": {"output": "dist_electron"},"files": ["dist/**/*","electron/*"],"win": {"target": "nsis","icon": "build/icon.ico"},"mac": {"target": "dmg","icon": "build/icon.icns"},"linux": {"target": "AppImage","icon": "build/icon.png"}},...
}

• 也可以把electron打包配置到單獨的electron-builder.yml文件。好處是可以注釋。

appId: com.example.yourapp
productName: YourApp
copyright: Copyright ? 2025 MyApp
directories:output: dist_electron
files:- "dist/**/*"- "electron/*"
asar: true
win:target: nsisicon: build/icon.ico
mac:target: dmgicon: build/icon.icns
linux:target: AppImageicon: build/icon.png
nsis:oneClick: false # 是否一鍵安裝#allowElevation: true # 允許請求提升權限allowToChangeInstallationDirectory: true # 允許修改安裝目錄createDesktopShortcut: true # 創建桌面快捷方式createStartMenuShortcut: true # 創建開始菜單快捷方式

安裝配置env環境變量

• 安裝 dotenv-webpack

npm install dotenv-webpack --save-dev

• 修改vue.config.js

const Dotenv = require('dotenv-webpack');
module.exports = {configureWebpack: {plugins: [new Dotenv({path: `./.env.${process.env.NODE_ENV}`,})]}
};

• 安裝cross-env

npm install cross-env --save-dev

• 修改package.json 啟動配置

{..."scripts": {// "serve": "vue-cli-service serve","serve": "cross-env NODE_ENV=development vue-cli-service serve",// "build": "vue-cli-service build","build": "cross-env NODE_ENV=production vue-cli-service build",...},}

• 創建 .env 文件

touch .env.development
touch .env.production

// .env.development
API_URL=https://dev.api.example.com

// .env.production
API_URL=https://pro.api.example.com

安裝vue-router配置

npm install vue-router

// src/router/index.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';const routes = [{ path: '/', component: HelloWorld }
];const router = createRouter({// 打包用createWebHashHistory，如果用createWebHistory，頁面會出現白板。history: process.env.NODE_ENV === 'production'? createWebHashHistory(process.env.BASE_URL): createWebHistory(process.env.BASE_URL),routes,
});

執行命令

• electron本地啟動

npm run electron:serve

• electron打包

// 先執行vue的打包
npm run build
// 再執行electron的打包
npm run electron:build