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: "/"
	}
}

即可解决以上问题。

相关推荐
www_pp_44 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia2 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia2 小时前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学