开发完vue项目后想打包成桌面应用程序的话，可以使用electron
在项目根目录加两个文件
1、main.js
// 导入模块
const { app, BrowserWindow } = require("electron");
const path = require("path");
// const NODE_ENV = "development"; //开发环境;//process.env.NODE_ENV;
const NODE_ENV = "process.env.NODE_ENV"; //开发环境;//process.env.NODE_ENV;
// 创建主窗口
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 840,
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(
"http://localhost:8888/index"
);
// 设置窗口菜单栏
mainWindow.setMenu(null);
//默认最大化
mainWindow.maximize();
//打开
mainWindow.show();
// 打开开发工具
// if (NODE_ENV === "development") {
// mainWindow.webContents.openDevTools();
// }
// 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、preload.js 这个是类似浏览器F12的效果，可以不要，我已经在main里注释掉了，想用的话解除main.js里 webPreferences 和打开开发工具那一栏的注释就行
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
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、安装依赖
//运行electron
npm install electron --save-dev
//打包用的
npm install electron-builder --save-dev
4、package.json文件，这里要引入main.js，还得在scripts加启动和打包命令，再把build设置一下就行了
{
"name": "public-health1",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"prettier": "prettier --write .",
"commit": "cz",
"serve": "vite preview",
"electron": "electron .",
"electron:build": "electron-builder",
},
"build": {
"appId": "com.demo.sxsc",
"productName": "sxsc",
"copyright": "Copyright © 2024 <xigua.com>",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"deleteAppDataOnUninstall": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
},
"dependencies": {
"@alicloud/dysmsapi20170525": "^2.0.22",
"@better-scroll/core": "^2.4.2",
"@vueup/vue-quill": "^1.1.1",
"@vueuse/core": "^6.7.5",
"axios": "^0.19.2",
"better-scroll": "^2.4.2",
"echarts": "^5.4.2",
"element-plus": "^2.3.1",
"js-cookie": "^3.0.1",
"js-md5": "^0.7.3",
"jsencrypt": "^3.3.2",
"lodash": "^4.17.21",
"qs": "^6.11.1",
"vexip-ui": "^2.0.0-beta.15",
"vue": "^3.2.36",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"main": "main.js",
"devDependencies": {
"@vitejs/plugin-vue": "^1.10.2",
"@vue/compiler-sfc": "^3.0.4",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "^3.3.0",
"electron": "^33.2.1",
"electron-builder": "^25.1.8",
"electron-packager": "^17.1.2",
"prettier": "^2.6.2",
"sass": "^1.43.2",
"typescript": "^4.4.3",
"unplugin-auto-import": "^0.6.6",
"unplugin-vue-components": "^0.17.8",
"vite": "^2.6.4",
"vite-plugin-html": "^2.1.2",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-style-import": "^1.4.1",
"vite-plugin-windicss": "^1.8.10",
"windicss": "^3.5.6"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"eslingConfig": {
"rules": {
"vue/no-unused-vars": 0,
"no-unused-vars": 0
}
}
}
6、运行和打包
//运行
npm run electron
//打包
npm run electron:build
7、其他
electron-builder会报错，找不到原因的话就换electron-package打包
配置文件package.json的script里加上"e-package": "electron-packager ."，再安装个依赖就行
//安装依赖
npm install electron-packager --save-dev
//package.json的script里加上
"e-package": "electron-packager ."
//运行打包
npm run e-package
