这篇文章上次修改于 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());
    }
}

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

参考资料