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

打包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

  - 要呈現的網頁。這是應用程式的渲染程序。

頁面樣式修改

"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));
        }
      });      

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