vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決

更新時(shí)間：2024年06月26日 09:39:41 作者：夢翼橫空

在前端開發(fā)中,Electron是一種常用的工具,它允許開發(fā)者使用Web技術(shù)構(gòu)建桌面應(yīng)用程序,本文主要介紹了vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決,具有一定的參考價(jià)值,感興趣的可以了解一下

一、安裝

1.安裝electron

npm install electron --save-dev
npm install electron-builder --save-dev

2.在vue項(xiàng)目根目錄新建文件index.js

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow,Menu } = require('electron')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 啟用 Node.js 集成
      contextIsolation: false, // 禁用上下文隔離（Node.js 集成的一個(gè)選項(xiàng)）
      webSecurity: false, // 禁用同源策略
      contextIsolation: false,
      session: {
        cookies: true // 這行確保啟用了cookie
      }

    },
    icon: 'build/.icon-ico/icon.ico'//這里是自動生成的圖標(biāo)，默認(rèn)情況下不需要改

  })

  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html')//如果要本地化，這樣寫，如果寫遠(yuǎn)程的，那這里就是請求的域名
  //隱藏頂部菜單
  // mainWindow.setMenu(null);
  // Open the DevTools.
  // Open the DevTools.
  //mainWindow.webContents.openDevTools()
  mainWindow.maximize();//默認(rèn)最大化
}
//設(shè)置中文菜單，默認(rèn)是英文的
const createMenu = () => {
  const template = [
    {
      label: '文件',
      submenu: [
        {
          label: '退出',
          accelerator: 'CmdOrCtrl+Q',
          click: () => {
            app.quit();
          }
        }
      ]
    },
    {
      label: '查看',
      submenu: [
        { label: '重新加載', accelerator: 'F5', role: 'reload' },
        { label: '全屏', accelerator: 'F11', role: 'togglefullscreen' },
        { label: '開發(fā)者工具', role: 'toggledevtools' }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  createMenu()//菜單設(shè)置
  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

3.package.json文件編輯

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service build && electron-builder",
    "electron:serve": "electron ."
  },
  "build": {
    "productName": "這里是你的項(xiàng)目名",
    "appId": "com.example.這里是appId",
    "win": {
      "icon": "favicon.ico",
      "target": ["nsis", "appx"]
    },
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/**/*",
      "index.js"http://這里是剛才建的index.js
    ]
  },

4.測試

npm run electron:serve

5.打包

npm run electron:build

二、報(bào)錯(cuò)解決

解決：打開cmd 執(zhí)行 npm config edit

npm config edit

打開配置文件粘貼以下內(nèi)容

registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
electron_mirror=https://npm.taobao.org/mirrors/electron/
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

三、使用

真正用的時(shí)候會出現(xiàn)各種，比例啟動exe的圖標(biāo)，cookie。

還有就是，平時(shí)我的打包項(xiàng)目不需要指定域名，如果這里用本地化就需要指定域名。

默認(rèn)配置是不開啟cookie的，還有就是用cookie不太好，每次啟動exe都需要登錄太麻煩了，推薦使用localStorage永久保存。

我的cookie示例，打包exe時(shí)使用localStorage，其他情況下使用cookie：

 setCookie(cname, cvalue)
 {
    if(process.env.NODE_ENV === "host"){
        localStorage.setItem(cname, cvalue);

    }else{
        document.cookie = cname + "=" + cvalue
    }
    //  var d = new Date();
    //  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    //  var expires = "expires=" + d.toUTCString();
     //document.cookie = cname + "=" + cvalue

 },
 getCookie(cname) {
    if(process.env.NODE_ENV === "host"){
        return localStorage.getItem(cname);
    }else{
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) != -1) {
                return c.substring(name.length, c.length);
            }
        }
        return "";

    }
 },
 clearCookie(cname) {
    if(process.env.NODE_ENV === "host"){
        localStorage.removeItem(cname);
    }else{
        var d = new Date();
        d.setTime(-1);
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=''; " + expires;
    }
},

其他代碼一并粘出來分享一下。

main.js

const env = process.env.NODE_ENV || 'development';

if(env === "host"){//如果是打包exe需要指定接口域名
    axios.defaults.baseURL = process.env.VUE_APP_INTERFACE
    axios.defaults.withCredentials = true;//跨域請求的全局憑證

}

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service build --mode host && electron-builder",//使用.env.host配置打包exe
    "electron:serve": "electron ."
  },
  "build": {
    "productName": "newsaas",
    "appId": "com.example.newsaas",
    "win": {
      "icon": "./icon256.png",//這里是啟動圖標(biāo)必須是256*256的png圖
      "target": [
        "nsis",
        "appx"
      ]
    },
    "mac": {
      "target": "dmg"
    },
    "nsis": {
      "oneClick": true,
      "allowToChangeInstallationDirectory": true,
      "perMachine": true,
      "allowElevation": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "index"

    },
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/**/*",
      "index.js",
      "public/favicon.ico"
    ]
  },

.dev

NODE_ENV=""
VUE_APP_INTERFACE="這里是我的接口域名，只能本地開發(fā)時(shí)，做代理用，打包不影響"

.dev.host

NODE_ENV="host"
VUE_APP_INTERFACE="http://這里是我的接口域名"

vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    devServer:{
      port:8080,
      allowedHosts: "all",
      webSocketServer:false,
      proxy:{
        "/":{
          target: process.env.VUE_APP_INTERFACE,
          changeOrigin:true,
          pathRewrite:{
            "^/":"/"
          }
        }
      }
    },

    transpileDependencies: true,
    publicPath: './',
    // 輸出文件目錄
    assetsDir: 'static',
    outputDir: process.env.outputDir,
    // eslint-loader 是否在保存的時(shí)候檢查
    lintOnSave: true,
    
    // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
    productionSourceMap: false
})

以上就是全部代碼，如果安裝不了electron，或是安裝后運(yùn)行不起來，改一下npm鏡像源試試，package-lock.json這個(gè)文件記得刪除。

到此這篇關(guān)于vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決的文章就介紹到這了,更多相關(guān)Electron打包成exe與報(bào)錯(cuò)解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: