0


electron打包Vue前端

Electron-Forge 打包Vue项目

  1. 效果:electronforge可将前端静态页面打包成.exe、.deb和.rpm等,能适配各种平台
  • 示例:Windows环境下将前端 Vue 项目打包成exe文件
  • 打包后的 exe 文件在这里插入图片描述
  • 运行 exe 文件在这里插入图片描述

一、项目准备

开源项目 RouYi 下载

  1. 本地环境
  1. # 环境版本信息node-v# v20.11.1npm-v# 10.2.4# 设置源npm config set registry https://registry.npmmirror.com/
  2. # 查看 node 源npm config get registry
  1. 安装依赖
  1. # 切换到Vue前端项目cd ruoyi-ui
  2. # 安装Vue所需依赖npminstall# 运行 Vue 项目npm run dev
  1. 报错
  • 3.1 原因:Node版本高了项目启动失败
  • 3.2 修改 package.json在这里插入图片描述
  • 3.3 修改后的 package.json
  1. "scripts":{"dev":"SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve","build:prod":"vue-cli-service build","build:stage":"vue-cli-service build --mode staging","preview":"node build/index.js --preview","lint":"eslint --ext .js,.vue src"},

二、项目配置

2. 修改项目配置

ruoyi-ui 下的配置修改

2.1 .env.production
  1. # 修改前
  2. VUE_APP_BASE_API='/prod-api'
  3. # 修改后(与后端保持一致)
  4. VUE_APP_BASE_API='http://localhost:8080'
2.2 vue.config.js
  1. # 修改前:静态资源路径
  2. publicPath: process.env.NODE_ENV==="production"?"/":"/",
  3. # 修改后
  4. publicPath:'./',
  5. # 实际接口地址与后端Sprintboot项目保持一致
  6. target:`http://localhost:8080`,
2.3 修改路由配置
  1. 进入 ruoyi-ui/src/router/index.js
  1. # 修改前:url不带#
  2. mode:'history'
  3. # 修改后:url带#
  4. mode:'hash'
2.4 全局修改Cookies为localStorage

由于打包成exe或deb这类可执行文件后,本地是没有 Cookies

在这里插入图片描述

  1. 全局搜索Cookies.get并替换为localStorage.getItem在这里插入图片描述
  2. 全局搜索Cookies.set并替换为localStorage.setItem在这里插入图片描述
  3. 全局搜索Cookies.remove并替换为localStorage.removeItem
  4. 进入ruoyi-ui/src/views/login.vue
  • 修改前
  1. localStorage.setItem("username",this.loginForm.username,{expires:30});
  2. localStorage.setItem("password",encrypt(this.loginForm.password),{expires:30});
  3. localStorage.setItem('rememberMe',this.loginForm.rememberMe,{expires:30});
  • 修改后
  1. localStorage.setItem("username",this.loginForm.username);
  2. localStorage.setItem("password",encrypt(this.loginForm.password));
  3. localStorage.setItem('rememberMe',this.loginForm.rememberMe);

防止登录界面错乱显示

  1. getCookie(){const username = localStorage.getItem("username");const password = localStorage.getItem("password");const rememberMe = localStorage.getItem('rememberMe');// 由于localStorage获取值时,没有值默认是 null 而不是 undefinedthis.loginForm ={username: username ===null?this.loginForm.username : username,password: password ===null?this.loginForm.password :decrypt(password),rememberMe: rememberMe ===null?false:Boolean(rememberMe)};},

错乱显示示例
在这里插入图片描述

2.5 退出登录白页问题
  1. 进入 ruoyi-ui/src/layout/components/Navbar.vue
  • 修改前退出登录路由跳转
  • 修改后
  1. asynclogout(){this.$confirm('确定注销并退出系统吗?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$store.dispatch('LogOut').then(()=>{this.$router.push('/login')})}).catch(()=>{});}
2.6 无效会话
  1. 401
  1. src/utils/request.js

修改前

  1. if(code ===401){if(!isRelogin.show){
  2. isRelogin.show =true;
  3. MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录','系统提示',{confirmButtonText:'重新登录',cancelButtonText:'取消',type:'warning'}).then(()=>{
  4. isRelogin.show =false;
  5. store.dispatch('LogOut').then(()=>{
  6. location.href ='/index';})}).catch(()=>{
  7. isRelogin.show =false;});}

修改后

  1. if(code ===401){if(!isRelogin.show){
  2. isRelogin.show =true;
  3. MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录','系统提示',{confirmButtonText:'重新登录',cancelButtonText:'取消',type:'warning'}).then(()=>{
  4. isRelogin.show =false;
  5. store.dispatch('LogOut').then(()=>{
  6. location.href ='/#/login';// 或者// location.href = '/';})}).catch(()=>{
  7. isRelogin.show =false;});}

三、开始打包

3.1 打包 Vue
  1. npm run build:prod
  • 报错node版本冲突
  • 原因 node版本过高
  • 解决方案进入 ruoyi-ui/package.json
  • 修改前在这里插入图片描述
  • 修改后
  1. "scripts":{"dev":"SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve","build:prod":"SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build","build:stage":"vue-cli-service build --mode staging","preview":"node build/index.js --preview","lint":"eslint --ext .js,.vue src"},

以上配置修改后,重新执行打包命令

  1. npm run build:prod
  1. 打包好后出现 ruoyi-ui/dist 文件夹

打包后的前端资源

3.1 下载 electron 骨架项目

第一步:下载把

  1. electron

官方例子

  1. git clone https://github.com/electron/electron-quick-start

第二步:配置项目

  • 2.1 删除index.htmlpackage-lock.json

在这里插入图片描述

  • 2.2 将 Vue 打包后的dist放入项目 electron-quick-start 根目录上

在这里插入图片描述

  • 2.3 入口文件 main.js ,修改打包的文件路径为我们的index.html
  1. // 原始内容
  2. mainWindow.loadFile('index.html')// 修改后的内容
  3. mainWindow.loadFile('./dist/index.html')
  • 2.4 进入 package.json
  1. // 原始内容 "devDependencies":{"electron":"^29.2.0"}// 修改后的内容 "devDependencies":{}

第三步:安装依赖

  • 2.1 配置npm

如果不配置,为 electron-quick-start 项目下载 electron 超级慢,甚至下载失败!!!

  1. 寻找电脑上的 .npmrc

:默认c盘下
在这里插入图片描述

Everything是一款在系统中快速搜索文件的软件

  1. .npmrc 中添加最后两行
  1. prefix=D:\Environment\nodejs\node_global
  2. cache=D:\Environment\nodejs\node_cache
  3. registry=https://registry.npmmirror.com/
  4. disturl=https://registry.npmmirror.com/-/binary/node
  5. electron_mirror=https://registry.npmmirror.com/-/binary/electron/
  • 下载依赖
  1. npminstall --save-dev electron
  2. npminstall --save-dev @electron-forge/cli
  3. npmexec--package=@electron-forge/cli -c"electron-forge import"npminstall --save-dev @electron-forge/plugin-fuses
  • 控制台输出

在这里插入图片描述

  1. # 运行预览打包后的exenpm run start
  2. # 构建分发包形成单个exenpm run make
  • Windows下成功打包exe在这里插入图片描述

electron-forge 会检测当前系统是Windows,还是Linux,最终分发成.exe、.deb或.rpm都是看你当前执行 npm run make

  1. # 当然你可以强制修改平台,通过添加参数platform
  2. "scripts":{"start":"electron-forge start","package":"electron-forge package","make":"electron-forge make --platform=linux"},
  1. But ERROR

在这里插入图片描述

Windows 上打包成 .deb不被允许

  1. 依据 electronforge 官网解释

Electron Forge 官网 deb 描述
在这里插入图片描述

你只能在 Linux 或者 macOS操作系统上打包 deb 文件,因此 Windows 操作系统下无法构建.deb的哦!!!

参考网站:

  1. electronforge官网
  2. ruoyi-vue | electron打包教程(超详细)
  3. 将Vue项目打包为Windows应用(.exe)
  4. electron-forge 流水线踩坑记录
标签: 前端 electron vue.js

本文转载自: https://blog.csdn.net/IT_Carter/article/details/137508293
版权归原作者 IT_Carter 所有, 如有侵权,请联系我们删除。

“electron打包Vue前端”的评论:

还没有评论