Electron-Builder 打包 Vue 项目避坑指南

最近在开发一个基于 Vue 的 Electron 项目,在打包时遇到了诸多问题,为了解决这些问题也查阅了非常多的资料,排除了很多坑。现在将可能遇到的问题整理成避坑指南,供大家参考(此避坑指南后续还会继续更新)。

依赖版本

"electron": "^30.0.1",

"electron-builder": "^24.13.3",

"electron-builder-squirrel-windows": "^24.13.3",

"electron-devtools-installer": "^3.2.0",

"electron-rebuild": "^3.2.9",

"vue": "^3.4.26",

node: 18.19.0

1. NPM换源

近期淘宝源更换域名导致非常多的朋友遇到npm无法使用的问题。应在用户文件夹下的 .npmrc 文件中添加这两行:

registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/

2. 路由问题

应当将 Vue-Router 更改为 hash 模式,以避免白屏问题。

3. Builder配置的位置问题

最新版本的electron-builder配置得写在vue.config.js 中才能生效。但网上好多文章都是直接在package.json里面配置,还有在electron生成的background.js里配置的。

因此我们应该在项目文件夹的vue.config.js中撰写配置:

javascript 复制代码
module.exports = {
  //判断开发模式还是生产模式
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  //插件配置
  pluginOptions: {
    //electronBuilder配置
    electronBuilder: {
      builderOptions: {
        'productName': 'all electron',//生成exe的名字
        "appId": "com.xi.www",//包名  
        "copyright": "xi",//版权信息
        "directories": { // 输出文件夹
          "output": "electron_output",
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为false,则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "installerIcon": "./build/icons/icon.ico",// 安装时图标
          "uninstallerIcon": "./build/icons/icon.ico",//卸载时图标
          "installerHeaderIcon": "./build/icons/icon.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 是否创建桌面图标
          "createStartMenuShortcut": true,// 是否创建开始菜单图标
          "shortcutName": "all-electron", // 快捷方式名称
          "runAfterFinish": false,//是否安装完成后运行
        },
        "win": {
          "icon": "build/icons/icon.ico",//图标路径
          "target": [
            {
              "target": "nsis", //利用nsis制作安装程序
              "arch": [
                "x64", //64位
                // "ia32" //32位
              ]
            }
          ]
        }
      }
    }
  }
}

注意严格检查配置格式 ,如果某个配置的格式或层级关系写得不对,配置是无法生效的,且运行npm run electron:build时有时也不会警告

4. 静态资源的打包问题

对于在渲染进程中使用到的静态资源 ,Webpack会自动帮我们打包,但是主进程使用到的静态资源却不会被正常打包进应用中,因此我们需要使用extraResourcesextraFiles的方式配置好需要打包的静态资源。

这里我在项目的根目录下新建了一个static文件夹,将静态资源放在里面。

vue.config.js中做如下配置:

javascript 复制代码
pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            builderOptions: {
                ...
                extraResources: ["./static/"]
            }
        }
    }

然后在主进程代码中需要用到静态资源的地方,分情况处理静态资源的路径,分为调试时路径和运行时路径两种:

javascript 复制代码
    let iconPath;
    if (process.env.WEBPACK_DEV_SERVER_URL) {
        iconPath = path.join(__dirname, '../static/icon.png');
    } else {
        iconPath = path.join(process.cwd(), '/resources/static/icon.png');
    }

这样就解决了静态资源无法打包的问题。

5. 图标字体不显示

iconfont.cn站点的字体图标下载到本地,采用Font class的方式调用,在开发预览环境中调用正常;可是打包后不显示字体图标。

其他各种框架的基于 字体 实现的图标也遇到了相同的问题。

在vue.config.js中设置 customFileProtocol字段:

javascript 复制代码
pluginOptions: {
	electronBuilder: {
		customFileProtocol: "/"
	}
}

即可解决以上问题。

相关推荐
酷酷的阿云2 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea