使用Electron将Vue项目打包成桌面应用
一、
Electron
https://so.csdn.net/so/search?q=Electron&spm=1001.2101.3001.7020
1、Electron安装命令：
npm install electron g
2、Vue项目添加Electron-builder打包工具：
vue add electron-builder
PS：如果安装electron或者builder打包工具失败请设置国内镜像并且重新安装
3、设置国内镜像：
npm config edit
4、执行后会弹出npm的配置文档，将以下类容复制到文件末尾。
electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
二、
npm run serve 网页运行 npm run electron:serve 网页运行并打开客户端运行 npm run electron:build 构建打包客户端-会在根目录生成dist_electron文件夹 其中的XXX Setup XXX.exe就是安装包
三、
1、修改logo图片配置打包信息：注意：是vue.config.js文件，不是package.js
我下面引入的图片里面有一个build/logo.ico的文件，这个文件大小必须是256*256的 然后这个build的目录在项目根目录下创建，图片放进去就行
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //判断开发模式还是生产模式
pluginOptions: {
electronBuilder: {
builderOptions: {
nsis: {
allowToChangeInstallationDirectory: true,
oneClick: false,
installerIcon: "./build/logo.ico", //安装logo
installerHeaderIcon: "./build/logo.ico" //安装logo
},
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置
},
win: {
icon: './build/logo.ico' //打包windows版本的logo
},
productName: "应用名称", //应用的名称
}
}
},
}2、electron-builder的配置文件
build: {
productName: "xxxx", //项目名 这也是生成的exe文件的前缀名
appId: "com.xxx.xxxxx", //包名
copyright: "xxxx", //版权信息
directories: { //输出文件夹
output: "build-electron"
},
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/" // 服务器地址
}
],
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/"
},
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"
}
}3、vue.config.js 配置示例：
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //判断开发模式还是生产模式
transpileDependencies: true,
lintOnSave: false,
pluginOptions: {
electronBuilder: {
builderOptions: {
productName: '随意', // 生成 exe 的名字
appId: "随意", // 包名
copyright: "随意", // 版权信息
asar: false, // 文件不压缩成 app.asar
directories: { // 输出文件夹
output: "electron_output",
},
nsis: {
oneClick: false, //是否一键安装
allowElevation: false, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序
allowToChangeInstallationDirectory: true, //是否允许修改安装目录
installerIcon: "./build/icons/icon.ico", // 安装时图标
uninstallerIcon: "./build/icons/icon.ico", //卸载时图标
installerHeaderIcon: "./build/icons/icon.ico", // 安装时头部图标
createStartMenuShortcut: true, // 是否创建开始菜单图标
createDesktopShortcut: true, //是否创建桌面图标
shortcutName: "随意", // 快捷方式名称
runAfterFinish: false, //是否安装完成后运行
},
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/"
},
win: {
icon: 'build/icons/icon.ico',
target: [{
target: "nsis", //利用nsis制作安装程序
arch: [
"x64", //64位
// "ia32" //32位
]
}]
},
}
}
}, })
四、
1、隐藏菜单栏目：根目录下src/background.js文件，找到app.on方法
app.on('ready', async () => {
createWindow()
// 隐藏菜单栏
const {
Menu
} = require('electron');
Menu.setApplicationMenu(null);
// hide menu for Mac
if (process.platform !== 'darwin') {
app.dock.hide();
}
})2、设定宽高也在这个文件里面
const win = new BrowserWindow({
width: 1000,
height: 800,
title: '标题',
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
}
})