vue3使用Electron打包成exe的方法与打包报错解决

目录

一、安装
二、报错解决
三、使用

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

// 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 集成的一个选项）
      webSecurity: false, // 禁用同源策略
      contextIsolation: false,
      session: {
        cookies: true // 这行确保启用了cookie
      }
    },
    icon: 'build/.icon-ico/icon.ico'//这里是自动生成的图标，默认情况下不需要改
  })
  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html')//如果要本地化，这样写，如果写远程的，那这里就是请求的域名
  //隐藏顶部菜单
  // mainWindow.setMenu(null);
  // Open the DevTools.
  // Open the DevTools.
  //mainWindow.webContents.openDevTools()
  mainWindow.maximize();//默认最大化
}
//设置中文菜单，默认是英文的
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: '开发者工具', 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()//菜单设置
  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.

"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": "这里是你的项目名",
    "appId": "com.example.这里是appId",
    "win": {
      "icon": "favicon.ico",
      "target": ["nsis", "appx"]
    },
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/**/*",
      "index.js"//这里是刚才建的index.js
    ]
  },

npm run electron:serve

npm run electron:build

npm config edit

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/

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

const env = process.env.NODE_ENV || 'development';
if(env === "host"){//如果是打包exe需要指定接口域名
    axios.defaults.baseURL = process.env.VUE_APP_INTERFACE
    axios.defaults.withCredentials = true;//跨域请求的全局凭证
}

"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",//这里是启动图标必须是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"
    ]
  },

NODE_ENV=""
VUE_APP_INTERFACE="这里是我的接口域名，只能本地开发时，做代理用，打包不影响"

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

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 是否在保存的时候检查
    lintOnSave: true,

    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false
})

关于vite+vue3打包部署问题
vue3+vite+移动端webview打包后页面加载空白问题解决办法
解决vue3项目打包后部署后某些静态资源图片不加载问题
vue3项目打包成apk(android)详细图文教程
Vue3造轮子之打包构建配置二级目录方式