惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

腾讯CDC
Microsoft Azure Blog
Microsoft Azure Blog
L
LangChain Blog
Y
Y Combinator Blog
Microsoft Security Blog
Microsoft Security Blog
宝玉的分享
宝玉的分享
B
Blog RSS Feed
MongoDB | Blog
MongoDB | Blog
Jina AI
Jina AI
D
Docker
B
Blog
Engineering at Meta
Engineering at Meta
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
I
InfoQ
G
Google Developers Blog
博客园 - Franky
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
The GitHub Blog
The GitHub Blog
T
The Blog of Author Tim Ferriss
大猫的无限游戏
大猫的无限游戏
阮一峰的网络日志
阮一峰的网络日志
U
Unit 42

博客园 - porter_代码工作者

给 codex 的长期任务,长沙一个定时任务,做保活功能 .net nupkgs 配置 Vibe Coding ---- 2026年3月 很火的词 bigemap 软件 godot 透明 与 混合模式 叠加使用效果 AI 回复 godot 描边插件 C# ScottPlot 高性能图表 高性能绘图库 godot + Avalonia 渲染第三方UI 判断左手坐标系和右手坐标系的方法 国产操作系统: 项目配置 .net 添加Nuget源 godot 位置 和 角度 的平滑插值 godot 通过代码程序化地生成一个三维数据场,然后使用光线步进(Ray Marching)着色器将其渲染出来。 godot shader 等高线的绘制 和 模型描边的绘制 和 shader 常用算法 godot shader 控制 颜色绘制的 金典公式 godot 四元数 旋转 godot 二维报表库 godot 5.4.4 线程安全的调用方法 godot FPS 第三人称教程 UE4脸部捕捉 LiveLink 数据 常用四元数的值 unity Avatar (化身)
使用electron-builder打包 vue3 项目 exe
porter_代码工作者 · 2024-10-23 · via 博客园 - porter_代码工作者

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: 运行截图: