将vue3项目打包成exe文件方法

一、安装

1.安装electron

npm install electron --save-dev

npm install electron-builder --save-dev

2.在vue项目根目录新建文件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 集成的一个选项）
      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.

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": "这里是你的项目名",

    "appId": "com.example.这里是appId",

    "win": {

      "icon": "favicon.ico",

      "target": ["nsis", "appx"]

    },



    "directories": {

      "output": "build"

    },

    "files": [

      "dist/**/*",

      "index.js"//这里是刚才建的index.js

    ]

  },

4.测试
 

npm run electron:serve

5.打包

npm run electron:build

二、报错解决

 解决：打开cmd 执行 npm config edit

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/

三、使用

真正用的时候会出现各种，比例启动exe的图标，cookie。

还有就是，平时我的打包项目不需要指定域名，如果这里用本地化就需要指定域名。

默认配置是不开启cookie的，还有就是用cookie不太好，每次启动exe都需要登录太麻烦了，推荐使用localStorage永久保存。

我的cookie示例，打包exe时使用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",//这里是启动图标必须是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="这里是我的接口域名，只能本地开发时，做代理用，打包不影响"

.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 是否在保存的时候检查
    lintOnSave: true,
    
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false
})

以上就是全部代码，如果安装不了electron，或是安装后运行不起来，改一下npm镜像源试试，package-lock.json这个文件记得删除。