使用electron打包Vue前端项目的详细流程

更新时间：2024年04月10日 09:08:47 作者：IT_Carter

这篇文章主要介绍了使用electron打包Vue前端项目的详细流程,文中通过图文结合的方式给大家介绍的非常详细,对大家学习electron打包Vue有一定的帮助,需要的朋友可以参考下

Electron-Forge 打包Vue项目

效果：electronforge可将前端静态页面打包成.exe、.deb和.rpm等，能适配各种平台

示例：Windows环境下将前端 Vue 项目打包成exe文件
打包后的 exe 文件

在这里插入图片描述

运行 exe 文件

在这里插入图片描述

一、项目准备

开源项目 RouYi 下载

本地环境

# 环境版本信息
node -v  # v20.11.1
npm -v  # 10.2.4

# 设置源
npm config set registry https://registry.npmmirror.com/

# 查看 node 源
npm config get registry

安装依赖

# 切换到Vue前端项目
cd ruoyi-ui
# 安装Vue所需依赖
npm install
# 运行 Vue 项目
npm run dev

报错

原因：Node版本高了

项目启动失败

修改 package.json

在这里插入图片描述

修改后的 package.json

  "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"
  },

二、项目配置

1. 修改项目配置

ruoyi-ui 下的配置修改

1.1 .env.production

# 修改前
VUE_APP_BASE_API = '/prod-api'

# 修改后（与后端保持一致）
VUE_APP_BASE_API = 'http://localhost:8080'

1.2 vue.config.js

# 修改前：静态资源路径
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",

# 修改后
publicPath: './',
 
# 实际接口地址与后端Sprintboot项目保持一致
target: `http://localhost:8080`,

1.3 修改路由配置

进入 ruoyi-ui/src/router/index.js

# 修改前：url不带#
mode: 'history'

# 修改后：url带#
mode: 'hash'

1.4 全局修改Cookies为localStorage

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

在这里插入图片描述

全局搜索Cookies.get并替换为localStorage.getItem

在这里插入图片描述

全局搜索Cookies.set并替换为localStorage.setItem

在这里插入图片描述

全局搜索Cookies.remove并替换为localStorage.removeItem

进入ruoyi-ui/src/views/login.vue

修改前

localStorage.setItem("username", this.loginForm.username, { expires: 30 });
localStorage.setItem("password", encrypt(this.loginForm.password), { expires: 30 });
localStorage.setItem('rememberMe', this.loginForm.rememberMe, { expires: 30 });

修改后

localStorage.setItem("username", this.loginForm.username);
            localStorage.setItem("password", encrypt(this.loginForm.password));
            localStorage.setItem('rememberMe', this.loginForm.rememberMe);

1.5 退出登录白页问题

进入 ruoyi-ui/src/layout/components/Navbar.vue

修改前

退出登录路由跳转

修改后

    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push('/login')
        })
      }).catch(() => {});
    }

三、开始打包

打包 Vue

npm run build:prod

报错

node版本冲突

原因

node版本过高

解决方案
进入 ruoyi-ui/package.json

修改前

在这里插入图片描述

修改后

"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"
  },

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

npm run build:prod

打包好后出现 ruoyi-ui/dist 文件夹

打包后的前端资源

3.1 下载 electron 骨架项目

第一步：下载把electron官方例子

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

第二步：配置项目

删除 index.html 和 package-lock.json

在这里插入图片描述

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

在这里插入图片描述

入口文件 main.js ，修改打包的文件路径为我们的index.html

// 原始内容 
mainWindow.loadFile('index.html') 

// 修改后的内容 
mainWindow.loadFile('./dist/index.html')

进入 package.json

// 原始内容 
  "devDependencies": {
    "electron": "^29.2.0"
  }
// 修改后的内容 
  "devDependencies": {}

第三步：安装依赖

配置npm

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

寻找电脑上的 .npmrc：默认c盘下

在这里插入图片描述

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

.npmrc 中添加最后两行

prefix=D:\Environment\nodejs\node_global
cache=D:\Environment\nodejs\node_cache
registry=https://registry.npmmirror.com/

disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://registry.npmmirror.com/-/binary/electron/

下载依赖

npm install --save-dev electron
npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"
npm install --save-dev @electron-forge/plugin-fuses

控制台输出

在这里插入图片描述

# 运行预览打包后的exe
npm run start
# 构建分发包形成单个exe
npm run make

Windows下成功打包exe

在这里插入图片描述

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

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

But ERROR

在这里插入图片描述

Windows 上打包成 .deb不被允许

依据 electronforge 官网解释

Electron Forge 官网 deb 描述

在这里插入图片描述

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

以上就是使用electron打包Vue前端项目的详细流程的详细内容，更多关于electron打包Vue项目的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Element-Plus el-col、el-row快速布局及使用方法
这篇文章主要介绍了Element-Plus el-col、el-row快速布局及使用方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue实现验证码输入框组件
最近做项目遇到这样的需求要求输入4位或6位短信验证码，输入完成后收起键盘。实现步骤大家参考下本文
2017-12-12
vue实现导出Word文件(数据流方式)
这篇文章主要介绍了vue实现导出Word文件(数据流方式)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vuex mutitons和actions初使用详解
这篇文章主要介绍了Vuex mutitons和actions初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vue的路由及路由钩子函数的实现
这篇文章主要介绍了Vue的路由及路由钩子函数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue.js基础知识汇总
Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。
2016-04-04
一文带你了解vue3.0响应式
Vue3.0相比较于之前的版本更快、更小、更易于维护、更贴近原生、对开发者更友好，本文就Vue3.0进行详细介绍，需要了解的小伙伴可以参考一下这篇文章
2021-09-09
Vue 组件组织结构及组件注册详情
这篇文章主要介绍的是Vue 组件组织结构及组件注册，为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的，文章学详细内容,需要的朋友可以参考一下
2021-10-10
如何使用el-cascader组件写下拉级联多选及全选功能
这篇文章主要介绍了如何使用el-cascader组件写下拉级联多选及全选功能,因为是有全选的功能,所以不能直接使用el-cascader组件, 而是选择使用el-select组件, 在此组件内部使用el-cascader-panel级联面板,感兴趣的朋友跟随小编一起看看吧
2024-03-03
vue实现验证码按钮倒计时功能
最近项目结束，空闲时间比较多，今天小编抽时间给大家使用vue写一个小例子，就决定做验证码倒计时功能，具体实例代码大家参考下本文
2018-04-04