目 录
2. 在根目录创建electron 文件夹,并新建main.js 和preload.js
1. 已知:vue3项目已经创建好
1.1 安装依赖(npm i) ;运行项目(npm run dev),确保项目是好的。
1.2. 打包本地Vue项目(npm run build)
打包好后会自动形成dist 文件夹
一、配置Electron
1. 安装electron
cnpm install --save-dev electron
安装好后,package.json 中会加载electron 及其版本号
配置 vite.config.js文件
ps:在配置vite.config.js文件之后可以进行打包本地项目。
2. 在根目录创建electron 文件夹,并新建main.js 和preload.js
main.js :
const { app, BrowserWindow } = require('electron') const path = require('path') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // 将此脚本(preload)附加到渲染器流程 webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API contextIsolation: true, // 可以使用require方法 enableRemoteModule: true, // 可以使用remote方法 } }) //也开页面 win.loadURL('http://localhost:3001') //控制台 win.webContents.openDevTools() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
preload.js
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]) } })
3.在package.json 中配置添加以下代码:
{ "name": "vue3_cli_default", "version": "1.0.0", "description": "Hello World!", "main": "electron/main.js", //main.js修改为electron/main.js "author": "Jane Doe", "license": "MIT", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview", "start": "electron ." }, ....... }
4. 安装concurrently
cnpm install concurrently
concurrently:可以同时执行多个命令
用于此项目中的作用:将启动vite和electron整合成一条命令,一键启动
安装好配置package.json
"dev": "concurrently vite \"electron .\""
5. 安装 nodemon 实现热更新
cnpm i nodemon -D
"dev": "concurrently vite \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\""
6. 本地启动
cnpm run dev
注意事项:electron 中的main.js 启动地址 要与本地启动的地址保持一致,否则打开是空白页。
二、 打包和发布Electron
1. 修改electron/main.js 文件
添加
const NODE_ENV = process.env.NODE_ENV win.loadURL( NODE_ENV === 'development' ? 'http://localhost:3000' :`file://${path.join(__dirname, '../dist/index.html')}` ); if (NODE_ENV === "development") { win.webContents.openDevTools() }
内容全乎的main.js
// 导入模块
const { app, BrowserWindow } = require("electron");
const path = require("path");
// const NODE_ENV = "development"; //开发环境;//process.env.NODE_ENV;
const NODE_ENV = "pro"; //开发环境;//process.env.NODE_ENV;
// 创建主窗口
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 1440,
height: 800,
center: true, // 窗口居中显示
// transparent: true, // 设置窗口透明
frame: true, //是否显示顶部导航,去掉关闭按钮 最大化最小化按钮
// titleBarStyle: "hidden", //Windows下创建的窗口是否带边框
// frame: false, // 隐藏默认标题栏和边框
titleBarStyle: "hiddenInset", // MacOS下使用内嵌式无边框样式
backgroundColor: "#02243B", //窗口背景
// fullscreen: true, //全屏设置
webPreferences: {
preload: path.join(__dirname, "preload.js"),
nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
contextIsolation: true, // 可以使用require方法 // 是否在独立 JavaScript 环境中运行
enableRemoteModule: true, // 可以使用remote方法
webSecurity: false, // 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的默认为true
defaultMonospaceFontSize: 16, //页面字体默认为16
minimumFontSize: 12, //页面字体最小为12
// v8CacheOptions: "bypassHeatCheckAndEagerCompile", //v8CacheOptions 强制 blink 使用 v8 代码缓存策略 除了编译是及时的。 默认策略是 code。
},
});
// // 和自己本地vue项目启动的地址保持一致
// mainWindow.loadURL("http://localhost:3000");
//判断是否为开发环境,开发环境需要更换url
mainWindow.loadURL(
NODE_ENV === "development"
? "http://localhost:3000"
: `file://${path.join(__dirname, "../dist/index.html")}`
);
// 设置窗口菜单栏
mainWindow.setMenu(null);
//默认最大化
mainWindow.maximize();
//打开
mainWindow.show();
// 打开开发工具
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools();
}
// // 当窗口被关闭时释放资源
// mainWindow.on("closed", function () {
// mainWindow = null;
// });
// 监听窗口最大化或最小化事件
mainWindow.on("maximize", function () {
console.log("窗口已最大化");
});
mainWindow.on("unmaximize", function () {
console.log("窗口已恢复原始大小");
});
// 处理窗口移动事件,例如更新托盘图标提示信息
mainWindow.on("move", function (event) {
console.log(`窗口已被移动至新位置`);
});
};
// 应用准备就绪,加载窗口
app.whenReady().then(() => {
createWindow();
// mac 上默认保留一个窗口
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 关闭所有窗口 : 程序退出 : windows & linux
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});
2. 安装electron-builder
cnpm i electron-builder -D
3. 配置package.json
"scripts": { "pack": "electron-builder --dir", "dist": "electron-builder" }, "build": { "appId": "luOne", "productName": "sd", "files": [ "dist/**/*", "electron/**/*" ], "directories": { "buildResources": "assets", "output": "electron-dist" }, "win": { "target": ["nsis"], "icon": "build/icon.ico" }, "mac": { "category": "public.app-category.utilities" }, "nsis": { "oneClick": false, "allowElevation": true, "deleteAppDataOnUninstall": true, "allowToChangeInstallationDirectory": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "测试文档项目" } }
添加备注:
build: { "nsis": { "oneClick": false, // 是否一键安装 "perMachine": false,//perMachine 可能会影响自动更新的安装权限问题(windows7不受影响) "allowElevation": true,// 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。 "allowToChangeInstallationDirectory": true,// 允许修改安装目录 "installerIcon": "./build/icons/icon.ico",// 安装图标 "uninstallerIcon": "./build/icons/icon.ico",//卸载图标 "installerHeaderIcon": "./build/icons/icon.ico",// 安装时头部图标 "createDesktopShortcut": true, // 创建桌面图标 "createStartMenuShortcut": true,// 创建开始菜单图标 "runAfterFinish": true,// 安装完成后是否运行项目 "shortcutName": "client-ico",// 图标名称 "include": "build/script/installer.nsh" // 自定义nsis脚本 }, }
更加全乎的注释
"build": { "appId": "your.id", // 应用的唯一ID "productName": "YourProductName", // 安装后生成的文件夹和快捷方式的名称 "nsis": { "oneClick": false, // 是否一键安装,如果为 false,则显示安装向导 "allowElevation": true, // 是否允许请求提升(以管理员身份运行) "allowToChangeInstallationDirectory": true, // 是否允许用户更改安装目录 "createDesktopShortcut": true, // 是否在桌面上创建快捷方式 "createStartMenuShortcut": true, // 是否在开始菜单中创建快捷方式 "shortcutName": "YourAppName", // 快捷方式的名称 "uninstallDisplayName": "Your App", // 卸载时显示的名称 "license": "path/to/license.txt", // 许可证文件的路径 "installerIcon": "path/to/installer-icon.ico", // 安装程序图标的路径 "uninstallerIcon": "path/to/uninstaller-icon.ico", // 卸载程序图标的路径 "installerHeaderIcon": "path/to/header-icon.ico", // 安装向导头部的图标路径 "installerSidebarIcon": "path/to/sidebar-icon.bmp", // 安装向导侧边栏的图标路径(必须是 BMP 格式) "runAfterFinish": true, // 安装完成后是否运行应用 "perMachine": true, // 是否为所有用户安装(而非仅当前用户) "script": "path/to/custom-nsis-script.nsh", // 自定义 NSIS 脚本的路径 "compression": "lzma", // 压缩方式,可选值包括 'none', 'zip', 'lzma' 等 "artifactName": "${productName}-${version}-Setup.${ext}", // 自定义输出文件的名称 }, }
4. 打包
cnpm run dist
打包成功会自动生成 electron-dist 文件夹,其中会有一个exe 文件,直接运行exe文件即可。