首先需要版本号大于14.0.0的较新的node版本
建议最好先安装淘宝镜像源
npm config set registry registry.npm.taobao.org
查看是否安装成功
cnpm -v
然后执行 cnpm install electron --save-dev
📝1.添加打包工具
vue add electron-builder
📝2.配置electron镜像地址
npm config set registry registry.npm.taobao.org/
npm config set electron_mirror="npm.taobao.org/mirrors/ele…"
npm config set electron_builder_binaries_mirror="npm.taobao.org/mirrors/ele…"
📝3.项目中设置跨域（访问不到后端接口）
打开env.development文件
VUE_APP_BASE_API = '线上地址/prod-api'
📝4.进行打包 npm run electron:build // 打包命令
打包成功后会在dist_electron中生成了exe文件，点击安装即可
📝5.设置应用图标
需要256*256，格式为ico，注意，不能采用直接修改后缀名的方式，需要使用专门的网站转换
打开 background.js文件 在createWindow事件里面
const win = new BrowserWindow({ width: 800, height: 600, icon: 'src/assets/logo/logo.ico', })
在build文件夹里 新增一个 256X256的名字为icon的ico文件
📝6.登录成功不能跳转
是因为jscookie的问题，将登录页面 （login）页面的所有cookies修改成 localStorage
const username = Cookies.get("username")
修改成
const username = localStorage.getItem("username")
找到路径 src/utils/auth 页面的所有cookies修改成 localStorage
export function getToken() { return localStorage.getItem(TokenKey) } 如果发现跳转到该页面没有调接口，也要把该页面cookie修改成localStorage
找到路径 src/router/index页面的 将history修改成 hash
export default new Router({
mode: 'hash', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
📝7.修改打包名称为中文
在package.json文件 增加"productName": "你的中文名称",
📝8.打包后退出登录页面白屏
找到退出登录页面 src/layout/components/Navbar文件
找到退出事件
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
// location.href = '/index';
换成
this.$router.push('/login')
})
}).catch(() => {}); } }
📝9.只能打开一个exe文件（在background.js 增加下面这段代码，将app关闭的事件也放在里面）
let myWindow = null
const additionalData = { myKey: 'myValue' }
const gotTheLock = app.requestSingleInstanceLock(additionalData)
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {
// 输出从第二个实例中接收到的数据
console.log(additionalData)
// 有人试图运行第二个实例，我们应该关注我们的窗口 if (myWindow) {
if (myWindow.isMinimized()) myWindow.restore()
myWindow.focus()
} }) app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
}) }
gitee地址：gitee.com/gentleBai/e…
