electron集成打包vue项目为桌面exe(若依前后端分离框架)
一、前期准备
- 下载若依前后端分离框架(https://gitee.com/y_project/RuoYi-Vue.git)
- 下载node版本大于14
- 安装淘宝镜像: npm config set registry https://registry.npm.taobao.org
- 检查是否安装成功: cnpm -v
- 进入ruoyi-ui前端项目下载依赖:(npm install 或者 cnpm i)
二、下载安装electron环境
-
下载electron: cnpm install electron --save-dev
-
添加打包命令: vue add electron-builder
<1> src下出现background.js 文件
<2> package.json 文件中出现electron指令
注:可能会出现报错
1. 关于报红信息关于 yarn等,可执行:yarn add vue-cli-plugin-electron-builder -D --tilde
2. 关于报红信息关于core-js等,可执行: npm install core-js
-
配置electron镜像地址:
(1)npm config set registry http://registry.npm.taobao.org/(2)npm config set electron_mirror=“https://npm.taobao.org/mirrors/electron/”
(3)npm config set electron_builder_binaries_mirror=“http://npm.taobao.org/mirrors/electron-builder-binaries/”
-
设置跨域问题
(1)打开env.production文件
(2)VUE_APP_BASE_API = ‘线上后端接口地址/prod-api’
-
执行打包命令:npm run electron:build
-
打包成功后会在目录下出现dist_electron文件,文件中生成了exe文件,点击安装即可
三、存在的一些问题
- 登录成功页面不跳转的问题
(1) 将项目中的Cookies.get全部替换为localStorage.getItem
(2) 将项目中的Cookies.set全部替换为localStorage.setItem
(3) 将项目中的Cookies.remove全部替换为localStorage.removeItem
- 将路由模式history 改为hash
找到路径 src/router/index页面的 将history修改成 hash
export default new Router({
mode: 'hash', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
- 退出登录页面白屏问题
找到退出登录页面 src/layout/components/Navbar文件
this.$store.dispatch('LogOut').then(() => {
// location.href = '/index';
换成
this.$router.push('/login')
})
- 打包后的exe刷新快捷键.
ctr + r 刷新
- 打包后的exe打开控制台的快捷键
ctr + shift + i 打开控制台
如发现打包过程中出现一些报错信息,可能是安装electron失败问题,可多次尝试cnpm install electron --save-dev和vue add electron-builder命令