vue項目打包桌面應用 exe程序以及打包為安裝程序exe

本文轉載自查看原文 2021-08-06 14:58 135 工具

打包mode

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

運行方法

#克隆這個倉庫
git clone https://github.com/electron/electron-quick-start
#進入倉庫
cd electron-quick-start
 #安裝依賴
npm i
#運行應用程序
npm start

將此應用程序與用於 API 代碼示例的Electron API Demos應用程序一起使用，以幫助您入門。

一個基本的 Electron 應用程序只需要這些文件：

package.json - 指向應用程序的主文件並列出其詳細信息和依賴項。
main.js- 啟動應用程序並創建一個瀏覽器窗口來呈現 HTML。這是應用程序的主要流程。
index.html- 要呈現的網頁。這是應用程序的渲染進程。

頁面樣式修改（二選其一）

main.js

package.json文件

"build": {
  "appId": "cc11001100.electron.example-001", // 程序包名
  "copyright": "CC11001100", // 版權相關信息
  "productName": "example-001",  // 項目名字
  "dmg": {
    "background": "res/background.png",  // 背景圖片的路徑
    "window": {
// 啟動后窗口左上角位置
      "x": 100,
      "y": 100,
// 啟動后窗口的大小
      "width": 500,
      "height": 300
    }
  },
  "win": {
// 打包后的文件會有個圖標，這個圖標的路徑，不指定的話默認的不好看
    "icon": "res/logo.png"
  }

安裝打包插件 electron-packager

npm install electron-packager --save-dev

修改package.json文件添加如下命令，使其可以打包為exe

"package":"electron-packager . test --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"

. ---- 當前目錄下所有文件

test ---- 打包后的exe名稱

out --- 打包后輸出文件地址

version ---- 版本號

打包后的目錄其中test.exe就是啟動文件直接點開看到效果和npm run start 是一樣的

修改main.js

加載文件地址指向你的dist內的index.html

可以打開調式模式

修改窗口左上角圖標

關閉菜單欄

main.js修改后start運行效果圖如下

當我打包完成后，進行運行的時候發現給我報了

Error: Redirected when going from "/login" to "/home" via a navigation guard.

路由報錯

我正常是用的情況頁面掉接口跳轉頁面

export function setToken(token) {

return Cookies.set(TokenKey, token)

}


loginApi(‘賬號’, ‘密碼’).then((res) => {
        if (res.data.errno === 0) {
          // 跳轉路由
          this.$router.push("/user");

　　　　　　// 存儲到本地  
          setToken(res.data.data);

} });

router文件

export function getToken() {

return Cookies.get(TokenKey)

}

router.beforeEach((to, from, next) => {
    if (!getToken()) {
    next('/login')
    } else{
        next()
    } 
})

分析：以上運行時點擊登陸出現錯誤，console的時候發現緩存的內容沒有存上，原因是在登陸時守衛路由沒有拿到token的值，

更改后：直接存儲在window上

頁面掉接口跳轉頁面

loginApi(‘賬號’, ‘密碼’).then((res) => {
        if (res.data.errno === 0) {
          // 存儲window上
          window.sessionStorage.setItem('user',res.data.data)
          // 跳轉路由  
          this.$router.push("/user").catch(err => console.log(err));
        }
      });

router文件

let flag = sessionStorage.getItem('user')
    // console.log(!getToken(),next(),flag)
    if (!flag) {
    next('/login')
    } else{
        next()
    }