文章目录
使用 electronjs 工具 将vue 打包成 桌面应用 ，官方文档： electronjs
第一步 打包 dist
打包 vue项目 得到 dist文件夹
第二步 创建配置文件
main.js
const {
Menu,
app,
BrowserWindow
} = require('electron'); //引入electron
let win;
let windowConfig = {
width: 800,
height: 600
}; //窗口配置程序运行窗口的大小
function createWindow() {
Menu.setApplicationMenu(null) // null值 表示取消顶部菜单栏
win = new BrowserWindow(windowConfig); //创建一个窗口
win.loadURL(`file://${
__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //开启调试工具
win.on('close', () => {
//回收BrowserWindow对象
win = null;
});
win.on('resize', () => {
// 监听窗口改变事件
// win.reload();
})
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
app.on('activate', () => {
if (win == null) {
createWindow();
}
});
package.json
{
"name": "demo",
"productName": "项目名称",
"author": "作者",
"version": "1.0.4",
"main": "main.js",
"description": "项目描述",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "demo",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"extraResources": [
{
"from": "./static/",
"to": "app-server",
"filter": [
]
}
],
"publish": [
{
"provider": "generic",
"url": "http://xxxxx/download/"
}
]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0",
"electron-updater": "^4.0.0"
},
"devDependencies": {
"electron": "^20.0.1"
}
}
第三步 安装 Electron
在 dist 目录中安装 Electron
安装命令：
npm install electron
测试 是否安装成功
electron -v
如果出现 找不到命令
换一个命令安装 Electron
npm install electron -g
第四步 测试运行
完成以上 三步 结构目录应该是酱紫的
其实也可以 第二步 -> 第三步 -> 第一步 这个步骤也可以，先安装 Electron,在把 dist里面的文件复制过来也可以
测试 运行 命令
electron .
成功后效果如下：
第五步 安装 electron-builder 打包
安装electron-builder（全局安装）
npm install -g electron-builder
npm install -g electron-package
执行打包命令
electron-builder
打包成功后会 创建一个 dist 文件夹
打开 dist文件夹，运行.exe 安装程序运行
常见错误
执行 electron-builder 异常
Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.
这个错误， 打开 package.json
去掉 红色下划线的那一行代码
再执行 electron-builder 打包
vue-element-admin 打包出来 页面跳转不了
1、修改路由模式为 hash
文件路径： \src\router\index.js
const createRouter = () => new Router({
/**
* 如果打包的是 web页面 去掉 mode: 'hash' 这行代码 不去掉 刷新会白屏 ，如果 需要使用 electron 打包成 桌面应用 加上 mode: 'hash', 这行代码
* 使用 electron 打包注意点： https://blog.csdn.net/csdn_zuirenxiao/article/details/124587664
*/
// mode: 'hash',
mode: 'history',
scrollBehavior(to, from, savedPosition) {
// 解决路由跳转后 会滚动到底部
if (savedPosition) {
console.info(1)
return savedPosition
} else {
return {
x: 0, y: 0 }
}
},
routes: constantRoutes
})
2、存储 token 使用 localStorage 代替 Cookies 存储
文件路径：\src\utils\auth.js
import Cookies from 'js-cookie'
// 登录token
const TokenKey = 'token'
/*
// 打包成 web 页面 使用
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
*/
// 使用 electron 打包成 桌面应用 使用，因为 electron 不支持 js-cookie
export function getToken() {
return localStorage.getItem(TokenKey)
}
export function setToken(token) {
return localStorage.setItem(TokenKey, token)
}
export function removeToken() {
return localStorage.removeItem(TokenKey)
}
3、config下面的index.js中bulid模块导出的路径
vue2 文件路径： 根目录\vue.config.js
找到 productionSourceMap 配置 修改 为 true
// productionSourceMap: false, // 打包成 web页面 使用
productionSourceMap: true, // 使用 electron 打包成 桌面应用 使用，这里必须设置 true，否则token读不到还是无法跳转的
vue3 不太清楚 vue.config 有没有改成其他文件 ，只要找到 productionSourceMap 这个参数就可以了
最后
以上的 package.json 、main.js 中的 部分 配置 需要实际去配置，不然就会出现 请求 后端出现 跨域、路由之类的问题