这篇文章上次修改于 802 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
使用 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());
}
}
虽然还是会报错 但是不用等它尝试下载那么多次了 不用管这个错误即可
没有评论