1 环境准备
Node
:v16.20.2(本地vue项目nodejs版本)Electron
:22.3.7vue
:2
2 Vue项目准备
- 更新相关依赖
npm install --registry https://registry.npmmirror.com/
npm run dev
3、引入Electorn
- 安装指定版本Electron:
npm install electron --save-dev
- 查看Electron版本:
npx electron --version
注意:切换成国内源以及设置
- 切换国内源:
npm config set registry https://registry.npmmirror.com
- 配置环境变量
ELECTRON_MIRROR
:https://npmmirror.com/mirrors/electron/
ELECTRON_CUSTOM_DIR
:{``{ version }}
4、修改项目
4.1 根目录创建main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
win.loadFile(path.join(__dirname, 'dist/index.html')); // 修改为你的打包输出路径
// 打开开发者工具
win.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();
});
4.2 修改 package.json
在 package.json
中添加 Electron 启动脚本:
"main": "main.js",
"scripts": {
"electron": "electron .",
"build": "vue-cli-service build" // 确保有这个构建命令
}
4.3 构建项目
npm run build
这将生成 dist
文件夹,包含生产环境的静态文件。
4.4 启动 Electron
npm run electron
5、使用内置web渲染vue
Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面,可以使用 express
或其他类似的 Node.js Web 框架。以下是一个基本的实现步骤:
5.1 安装依赖
首先,确保您已安装 express
和 vue
相关的依赖。可以通过 npm 安装:
npm install express
5.2 设置 Express 服务器
在您的项目中创建一个新的文件,例如 server.js
,并配置一个简单的 Express 服务器:
// server.js
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;
// Serve static files from the Vue app
app.use(express.static(path.join(__dirname, 'dist')));
// Handle all requests to serve the index.html file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.listen(PORT, () => {
console.log(`Server is running at http://localhost:${PORT}`);
});
5.3 修改 main.js
在主进程中,启动该服务器,并在 BrowserWindow
中加载它:
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec } = require('child_process');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
// Load the local server
win.loadURL('http://localhost:3000');
}
app.whenReady().then(() => {
// Start the server
exec('node server.js', (err, stdout, stderr) => {
if (err) {
console.error(`Error starting server: ${stderr}`);
return;
}
console.log(stdout);
});
createWindow();
});
// Quit when all windows are closed
app.on('window-all-closed', () => {
app.quit();
});
5.4 确保构建 Vue 应用
确保在启动 Electron 应用之前,您已经构建了 Vue 应用(例如运行 npm run build
),以便生成 dist
文件夹。
5.5 启动项目
最后,启动 your Electron 应用:
npm start
6、打包项目
如果您想打包成可执行文件,可以使用 Electron Builder 或 Electron Packager。安装 Electron Builder:
npm install electron-builder --save-dev
然后在 package.json
中添加打包配置:
{
"name": "your-app-name",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "vue-cli-service build", // 如果使用 Vue CLI
"package": "electron-builder" // 如果使用 electron-builder
},
"devDependencies": {
"electron": "^x.x.x", // 替换为您使用的版本
"electron-builder": "^x.x.x" // 替换为您使用的版本
}
}
打包命令:
npm run package
出错:
Get "https://github.com/electron/electron/releases/download/%7B%7B%20version%20%7D%7D/electron-v22.3.27-win32-ia32.zip": EOF
github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1
/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:206
github.com/develar/app-builder/pkg/download.(*Downloader).follow
/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:234
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry
/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download
/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload
/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:203
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download
/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:188
github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1
/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:73
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
/Users/runner/work/app-builder/app-builder/pkg/util/async.go:68
runtime.goexit
/Users/runner/hostedtoolcache/go/1.21.12/arm64/src/runtime/asm_386.s:1363
⨯ D:\projects\qihangerp-weishop\app\node_modules\app-builder-bin\win\ia32\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
2024/10/2 00:22:26
原因分析:
-
1、第一个错误是electron下载地址找错了。解决方案是:
-
方案一:修改
package.json
修改正确的下载地址"build": { "electronDownload": { "mirror": "https://github.com/electron/electron/releases/download/" } },
-
方案二:手动下载electron对应的版本包,放在
C:\Users\qilip\AppData\Local\electron\Cache
(直接将zip压缩包放进去)
-
-
2、electron-builder打包需要的三个关键文件下载失败问题:
winCodeSign-2.6.0.7z
nsis-resources-3.4.1.7z
Get nsis-3.0.4.1.7z
解决方案:
- 手动下载这三个包(https://github.com/electron-userland/electron-builder-binaries/releases?page=1)放到一下3个文件夹
C:\Users\qilip\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1
C:\Users\qilip\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
C:\Users\qilip\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0
最后顺利打包成功