1.首先clone一个后台管理系统模板
git clone https://github.com/PanJiaChen/vue-admin-template.git
2.安装electron
npm install electron -g
或者
yarn add electron
- Vue项目添加Electron-builder打包工具
vue add electron-builder
首先要安装vue-cli
yarn add @vue/cli
4.其他配置
修改logo图片配置打包信息：注意：是vue.config.js文件，不是package.js
根目录下 vue.config.js文件
使用时候请去掉里面的注释，不然跑不起来。
我下面引入的图片里面有一个build/logo.ico的文件，这个文件大小必须是256*256的
然后这个build的目录在项目根目录下创建，图片放进去就行
module.exports = {
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: "应用名称", //应用的名称
}
}
},
}
我再放一份electron-builder的配置文件，对比下上下两个代码就知道里面怎么配置了
"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"
}
}
隐藏菜单栏目：根目录下src/background.js文件，找到app.on方法 (按照步骤来做，会生成这个文件的)
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()
// 隐藏菜单栏
const {
Menu
} = require('electron');
Menu.setApplicationMenu(null);
// hide menu for Mac
if (process.platform !== 'darwin') {
app.dock.hide();
}
})
设定宽高也在这个文件里面
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
}
})
5.Mac运行builder的时候会报错
⨯ Exit code: ENOENT. spawn /usr/bin/python ENOENT failedTask=build
stackTrace=Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT
解决方案
which python
/Library/Frameworks/Python.framework/Versions/2.7/bin/python
3.打开文件
/node_modules/dmg-builder/out/dmg.js
查找
/usr/bin/python
修改为
/Library/Frameworks/Python.framework/Versions/2.7/bin/python
执行打包命令成功打包
6.添加打包windows exe包命令
page.json修改命令
"electron:build-mac": "vue-cli-service electron:build --macos",
"electron:build-win64": "vue-cli-service electron:build --windows --ia32",
7.打包以后跳转问题
第一步修改路由配置
history改为hash
const createRouter = () => new Router({
mode: 'hash', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
第二步
electron没有js-cookie依赖
找到src/utils/auth.js修改为
// import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'
export function getToken() {
// return Cookies.get(TokenKey)
return window.localStorage.getItem(TokenKey)
}
export function setToken(token) {
// return Cookies.set(TokenKey, token)
return window.localStorage.setItem(TokenKey,token)
}
export function removeToken() {
// return Cookies.remove(TokenKey)
return window.localStorage.removeItem(TokenKey)
}
然后打包即可成功跳转
