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

准备写个系列，先把flag立上～

• Github源码
• 1. electron-vue开发笔记（1）工程搭建及问题解决
• 2. electron-vue开发笔记（2）多窗口单页面入口配置
• 3. electron-vue开发笔记（3）多窗口多页面入口配置
• 4. electron-vue开发笔记（4）main进程断点调试vscode配置
• 5. electron-vue开发笔记（5）集成sqlite数据库

工程搭建

安装 vue-cli

vue-cli官网

$ npm install -g @vue/cli

创建工程

采用 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

Github源码