使用electron-builder打包 vue3 项目 exe

1: 配置 代理
  1）命令行执行  npm config edit
  2）在打开的记事本 添加如下代理： 
      electron_mirror=https://npmmirror.com/mirrors/electron/
      registry=https://registry.npmmirror.com
     注意 electron_mirror 的路径不是这个 https://registry.npmmirror.com/mirrors/electron/   ，这里卡了蛮久， 网上两种路径都有人写 

2：下载 第三方插件到 指定位置：执行 npm  run electron:build  打包， 根据命令行的错误提示的去下载要下载的包，下载到下文指定路径下
    

   首次使用electron-builder打包时，会到github上去下载winCodeSign和nsis的二进制文件，由于网络问题经常失败。

   解决方法：

   1.直接下载对应版本winCodeSign和nsis到本地，比如我的版本是winCodeSign-2.6.0.7z和nsis-3.0.4.1.7z

   2.下载后放于对应目录 windows: %LOCALAPPDATA%\electron-builder\Cache

   3.在Cache目录下创建nsis和winCodeSign

   4.将对应的压缩包拷贝到目录中去完整解压,最终效果如下：

  

       

          

       完成之后再运行electron-builder是不是直接就打包完成了呢。 参考：https://www.cnblogs.com/DevFans/p/14402077.html

3：启动白屏的问题： 在  vue.config.js 下 添加 如下配置代码：publicPath: process.env.NODE_ENV  ===  'production'  ?  './'  :  '/'
      

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

　　module.exports = defineConfig({

  　　transpileDependencies: true,

  　　publicPath: process.env.NODE_ENV  ===  'production'  ?  './'  :  '/'

　　})

4： 如果安装了全局的   electron  和  electron-builder， 打包的时候 也会提示找不到，
      需要在 package.json 的 devDependencies 里面再指定一次 如：版本号，是你全局安装时候的版本号

  "devDependencies": {

    "electron": "33.0.2",

    "electron-builder": "25.1.8",

    "@babel/core": "^7.12.16",

    "@babel/eslint-parser": "^7.12.16",

    "@vue/cli-plugin-babel": "~5.0.0",

    "@vue/cli-plugin-eslint": "~5.0.0",

    "@vue/cli-service": "~5.0.0",

    "eslint": "^7.32.0",

    "eslint-plugin-vue": "^8.0.3"

  },

5： 在项目的根目录新建 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.

 

6：package.json 添加  electron 编译和打包支持的配置项

{
  "name": "task-manage",
  "version": "0.1.0",
  "author": "txh",
  "description": "txh demo test",
  "private": true,
  "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": "txhdemo",
    "appId": "com.example.txhdemo",
    "win": {
      "icon": "favicon.ico"
    },
    "directories": {
      "output": "build"
    },
 
    "files": [
      "dist/**/*",
      "index.js"
    ]
  }
}

 

7： 运行截图：