这篇文章上次修改于 596 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

使用 vue-cli-plugin-electron-builder 创建 electron-vue 项目

全局安装 vue-cli

npm install -g @vue/cli

创建 vue 项目

vue create my-project

引入 vue-cli-plugin-electron-builder

cd my-project
vue add electron-builder

Node Integration

  • 项目根目录创建 vue.config.js 文件
  • 填入如下内容,并保存:

    module.exports = {
        pluginOptions: {
            electronBuilder: {
                nodeIntegration: true
            }
        }
    }

    拷贝项目文件到发布目录

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                productName: 'my-project',
                extraResources: {
                    from: './extraResources',
                    to: 'extraResources',
                },
            },
            nodeIntegration: true,
        },
    },
};

启动开发服务器

npm run electron:serve

打包应用

  • 项目根目录创建 .npmrc 文件
  • 填入如下内容,并保存,这一步是为了加快打包速度:

    ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
    ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
  • 输入如下指令打包

    npm run electron:build

  • 在银河麒麟 arm64 系统上打包时,由于没有安装 snap 导致打包失败,尝试安装 snap 却总是失败,可能是因为墙的原因。解决办法是不打包 snap 安装包,方法如下:

    编辑 vue.config.js

    module.exports = {
        pluginOptions: {
            electronBuilder: {
            builderOptions: {
                linux: {
                    target: [
                        {
                            target: 'AppImage',
                            arch: ['arm64'],
                        },
                    ],
                },
            },
            nodeIntegration: true,
            },
        },
    };

启动时卡住

INFO Launching Electron…
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error:     net::ERR_CONNECTION_TIMED_OUT

这是因为 Devtools 的安装需要翻墙

注释掉 src/background.js 中的以下代码就行了

if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
        await installVueDevtools();
    } catch (e) {
        console.error("Vue Devtools failed to install:", e.toString());
    }
}

虽然还是会报错 但是不用等它尝试下载那么多次了 不用管这个错误即可

参考资料