工程搭建

安装 vue-cli

vue-cli官网

$ npm install -g @vue/cli-init
复制代码

创建工程

采用 electron-vue 框架。

$ vue init simulatedgreg/electron-vue project
复制代码

安装依赖

$ 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