使用vue-cli-plugin-electron-builder打包electron遇到的坑

基本配置

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

module.exports = defineConfig({
    transpileDependencies: true,
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            customFileProtocol: "./",
            chainWebpackMainProcess: (config) => {
                config.output.filename('background.js');
            },
            builderOptions: {
                appId: "com.xxx.xxx",
                productName: "打包后exe的名称",
                win: {
                    icon: "打包后exe的图标",
                    requestedExecutionLevel: "设置exe的运行权限"
                },
                directories: {
                    output: "打包输出目录"
                },
                extraResources: [
                    { from: "./dist_electron/a", to: "a" },
                    { from: "./dist_electron/b", to: "b"}
                ],
            }             
        }
    }
})

transpileDependencies: true

表示将依赖项进行转译，可以把es6以上的语法改为es5，便于浏览器兼容

问题一：

electron打包无法使用node中fs等API

解决方案

将nodeIntegration属性设置为true

nodeIntegration选项是用于在Electron应用程序中启用Node.js集成的一个选项，当设置为true时允许在渲染进程中使用Node.js API，包括require()和其他Node.js模块系统的功能。

问题二：

使用vue-cli-service electron:build命令打包后，element-ui所引用的资源被设置为[app:///fonts/...]，导致element-ui的图标加载失败，app://是electron识别的路径，而app://./才是electron的指示请求来源。

解决方案

只需要在vue.config.js中设置customFileProtocol属性为：customFileProtocol: "./"

问题三：

当package.json 配置了入口文件为background.js后，

运行vue-cli-service electron:serve命令，报异常，显示未找到background.js文件，那是electron编译后的文件默认为：“index.js”。

解决方案

在vue.config.js中配置electron编译后的文件名为：“background.js”即可

问题四：

electron打包后的exe名字与图标自定义

1、其中requestedExecutionLevel的权限设置分别为：

• asInvoker : 表示应用程序就是以当前的权限运行。
• highestAvailable: 这个是以当前用户可以获得的最高权限运行。
• requireAdministrator: 这个是仅以系统管理员权限运行。

    默认情况下是 asInvoker

2、extraResources: []，配置electron打包时默认打包的静态资源，from文件源路径，to打包后的文件路径。此处的路径都是指相对路径。