工程搭建
安装 vue-cli
$ npm install -g @vue/cli-init
复制代码
创建工程
采用 electron-vue 框架。
$ vue init simulatedgreg/electron-vue project
复制代码
关于打包工具选择 packager 或者 builder 等,electron-vue 官方文档是建议用 electron-builder 的,但是我这里因为参考了 electron 官方demo: electron-api-demos-Zh_CN,最后选择 packager。
安装依赖
$ npm install
复制代码
编译开发版
$ npm run dev
复制代码
报错解决
问题 1: ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed
采用工程初始的package dependency版本配置,会有一个warnning。
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
复制代码
解决方案
各种 google,有的帖子说升级 node,或者重新install ajv 都不好用。最后解决方案是升级 ajv-keywords。
"devDependencies": {
"ajv": "^6.5.0",
"ajv-keywords": "^3.4.0"
}
复制代码
问题 2: Webpack ReferenceError: process is not defined
问题2是在尝试解决问题1时引入的。当时升级 node -> 14.0.0,electron -> 8.2.3, electron-packager -> 14.2.1"。
解决方案
在 webpack.renderer.config 文件中插入代码:
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
复制代码
问题 3: Uncaught ReferenceError: require is not defined
问题3也是在尝试解决问题1时引入的。因为 electron 升级到5.0以上之后,在创建窗口的时候需要手动开启node集成
解决方案
在src/main/index.js中,创建窗体时添加参数:
webPreferences: {
nodeIntegration: true
}
复制代码
Happy Ending
作者:Melody5417
链接:https://juejin.im/post/5eeb5113e51d45740950c661
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。