快捷導(dǎo)航

使用electron打包Vue前端項(xiàng)目的詳細(xì)流程

更新時(shí)間：2024年04月10日 09:08:47 作者：IT_Carter

這篇文章主要介紹了使用electron打包Vue前端項(xiàng)目的詳細(xì)流程,文中通過圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下

Electron-Forge 打包Vue項(xiàng)目

效果：electronforge可將前端靜態(tài)頁面打包成.exe、.deb和.rpm等，能適配各種平臺(tái)

示例：Windows環(huán)境下將前端 Vue 項(xiàng)目打包成exe文件
打包后的 exe 文件

在這里插入圖片描述

運(yùn)行 exe 文件

在這里插入圖片描述

一、項(xiàng)目準(zhǔn)備

開源項(xiàng)目 RouYi 下載

本地環(huán)境

# 環(huán)境版本信息
node -v  # v20.11.1
npm -v  # 10.2.4

# 設(shè)置源
npm config set registry https://registry.npmmirror.com/

# 查看 node 源
npm config get registry

安裝依賴

# 切換到Vue前端項(xiàng)目
cd ruoyi-ui
# 安裝Vue所需依賴
npm install
# 運(yùn)行 Vue 項(xiàng)目
npm run dev

報(bào)錯(cuò)

原因：Node版本高了

項(xiàng)目啟動(dòng)失敗

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

二、項(xiàng)目配置

1. 修改項(xiàng)目配置

ruoyi-ui 下的配置修改

1.1 .env.production

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

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

1.2 vue.config.js

# 修改前：靜態(tài)資源路徑
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",

# 修改后
publicPath: './',
 
# 實(shí)際接口地址與后端Sprintboot項(xiàng)目保持一致
target: `http://localhost:8080`,

1.3 修改路由配置

進(jìn)入 ruoyi-ui/src/router/index.js

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

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

1.4 全局修改Cookies為localStorage

由于打包成exe或deb這類可執(zhí)行文件后，本地是沒有 Cookies

在這里插入圖片描述

全局搜索Cookies.get并替換為localStorage.getItem

在這里插入圖片描述

全局搜索Cookies.set并替換為localStorage.setItem

在這里插入圖片描述

全局搜索Cookies.remove并替換為localStorage.removeItem

進(jìn)入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 退出登錄白頁問題

進(jìn)入 ruoyi-ui/src/layout/components/Navbar.vue

修改前

退出登錄路由跳轉(zhuǎn)

修改后

    async logout() {
      this.$confirm('確定注銷并退出系統(tǒng)嗎？', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push('/login')
        })
      }).catch(() => {});
    }

三、開始打包

打包 Vue

npm run build:prod

報(bào)錯(cuò)

node版本沖突

原因

node版本過高

解決方案
進(jìn)入 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"
  },

以上配置修改后，重新執(zhí)行打包命令

npm run build:prod

打包好后出現(xiàn) ruoyi-ui/dist 文件夾

打包后的前端資源

3.1 下載 electron 骨架項(xiàng)目

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

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

第二步：配置項(xiàng)目

刪除 index.html 和 package-lock.json

在這里插入圖片描述

將 Vue 打包后的dist放入項(xiàng)目 electron-quick-start 根目錄上

在這里插入圖片描述

入口文件 main.js ，修改打包的文件路徑為我們的index.html

// 原始內(nèi)容 
mainWindow.loadFile('index.html') 

// 修改后的內(nèi)容 
mainWindow.loadFile('./dist/index.html')

進(jìn)入 package.json

// 原始內(nèi)容 
  "devDependencies": {
    "electron": "^29.2.0"
  }
// 修改后的內(nèi)容 
  "devDependencies": {}

第三步：安裝依賴

配置npm

如果不配置，為 electron-quick-start 項(xiàng)目下載 electron 超級(jí)慢，甚至下載失?。。。?/p>

尋找電腦上的 .npmrc：默認(rèn)c盤下

在這里插入圖片描述

Everything是一款在系統(tǒng)中快速搜索文件的軟件

.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

控制臺(tái)輸出

在這里插入圖片描述

# 運(yùn)行預(yù)覽打包后的exe
npm run start
# 構(gòu)建分發(fā)包形成單個(gè)exe
npm run make

Windows下成功打包exe

在這里插入圖片描述

electron-forge 會(huì)檢測(cè)當(dāng)前系統(tǒng)是Windows，還是Linux，最終分發(fā)成.exe、.deb或.rpm都是看你當(dāng)前執(zhí)行 npm run make

# 當(dāng)然你可以強(qiáng)制修改平臺(tái)，通過添加參數(shù)platform
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make --platform=linux"
  },

But ERROR

在這里插入圖片描述