目录
添加Electron-builder打包工具, 直接回车即可
1.项目启动速度较慢, 在background.js中, 注释掉这段代码
2.跨域问题 ,加上此配置 webSecurity: false, 根据需要窗口调整大小
3..electron build 打包时，背景图片失败，background-image: url 被转换成 app:///img/
4.electron 打包后, 请求地址变成了app://开头
一. 基于搭建好的vue项目, 全局安装Electron
添加electron
npm install electron -g 全局安装
cnpm install electron --save-dev 局部安装
添加Electron-builder打包工具, 直接回车即可
vue add electron-builder
安装完毕, 会发现目录里多了一个 background.js 的文件，并且 package.json 里多了依赖和执行命令, 其中这个“main”: “background.js” 是 electron 的入口文件
二. 测试, 打包
在package.json 会生成electron启动 和打包命令
npm run serve 网页运行
npm run electron:serve 网页运行并打开客户端运行
npm run electron:build 构建打包客户端-会在根目录生成dist_electron文件夹
其中的XXX Setup XXX.exe就是安装包
三. 项目打包其他配置( 应用名称 、安装流程相关)
根目录下 vue.config.js 文件
引入的图片文件大小必须是 256\*256 的
然后这个 build 的目录在项目根目录下创建，图片放进去就行
```
参照表
"build": {
"productName":"xxxx", //项目名 这也是生成的 exe 文件的前缀名
"appId": "com.xxx.xxxxx", //包名
"copyright":"xxxx", //版权信息
"directories": { //输出文件夹
"output": "build"
},
"nsis": { //nsis 相关配置，打包方式为 nsis 时生效
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./build/icons/aaa.ico", // 安装图标
"uninstallerIcon": "./build/icons/bbb.ico", //卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "xxxx", // 图标名称
"include": "build/script/installer.nsh", // 包含的自定义 nsis 脚本
},
"publish": [
{
"provider": "generic", // 服务器提供商，也可以是 GitHub 等等
"url": "http://xxxxx/" // 服务器地址
}
],
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis", //使用 nsis 打成安装包，"portable"打包成免安装版
"arch": [
"ia32", //32 位
"x64" //64 位
]
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"linux": {
"icon": "build/icons"
}
}
```附上我项目运用上的配置,供参考
// electron相关配置
pluginOptions: {
electronBuilder: {
customFileProtocol: "./", //解决背景图片异常问题
builderOptions: {
productName: "xxx系统", //项目名（exe 文件的前缀名)
nsis: {
allowToChangeInstallationDirectory: true, //自定义安装路径
oneClick: false, //是否一键安装
createDesktopShortcut: "always", // 是否添加桌面快捷方式
installerIcon: "./build/icons/icon.ico",
uninstallerIcon: "./build/icons/icon.ico",
uninstallDisplayName: "卸载xxx系统",
shortcutName: "xxx系统", // 图标名称
},
},
},
},配置完成后, 应用名称, 版本号等界面灵动化
四. 常见问题
1.项目启动速度较慢, 在background.js中, 注释掉这段代码
app.on("ready", async () => {
// if (isDevelopment && !process.env.IS_TEST) {
// // Install Vue Devtools
// try {
// await installExtension(VUEJS_DEVTOOLS)
// } catch (e) {
// console.error('Vue Devtools failed to install:', e.toString())
// }
// }
createWindow();
});2.跨域问题 ,加上此配置 webSecurity: false, 根据需要窗口调整大小
const win = new BrowserWindow({
width: 1200,
height: 1080,
// autoHideMenuBar: true, // 隐藏菜单栏
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, // 禁用上下文隔离
webSecurity: false, //关闭安全策略, 解决跨域问题
},
});
win.maximize();//实现窗口最大化3..electron build 打包时，背景图片失败，background-image: url 被转换成 app:///img/
通过在 vue.config.js 中添加 customFileProtocol，再次打包成功！
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
pluginOptions: {
electronBuilder: {
customFileProtocol: "./", //解决背景图片异常问题
},
},
});
4.electron 打包后, 请求地址变成了app://开头
这种情况,解决方式很简单, 写死即可
思路: 将请求地址定义在.env.xxx的配置文件中, 通过不同的环境来编译, 测试环境 ,开发环境正常用代理, 生产环境写死地址
5.桌面应用图标默认图标,更改为自定义图标
electron-icon-builder是一个生成图标的包
安装 electron-icon-builder
npm install electron-icon-builder --save-dev
package.json 中配置命令
"scripts": {
"electron:generate-icons": "electron-icon-builder --input=./public/favicon.png --output=build --flatten"
},
执行命令, 生成icon
npm run electron:generate-icons
完成后会在根目录多出来一个build目录
在vue.config.js 中, 也要将路径进行调整 ./build/icons/icon.ico
删除原来的dist_electron，重新打包，安装后就是新图标了