electron-vue开发笔记（1）工程搭建及问题解决

工程搭建

安装 vue-cli

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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。