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

最新推荐文章于 2025-06-10 09:02:13 发布

转载最新推荐文章于 2025-06-10 09:02:13 发布 · 362 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5eeb5113e51d45740950c661

vue前端学习专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用Vue CLI和electron-vue框架搭建Electron项目，包括安装依赖、编译开发版及解决常见错误的过程。针对ajv-keywords版本不匹配、Webpack中process未定义和require未定义等问题提供了具体解决方案。

工程搭建

安装 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 ReferenceError: process is not defined

解决方案

在 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集成

Uncaught ReferenceError: require is not defined

解决方案

在src/main/index.js中，创建窗体时添加参数：

webPreferences: {
  nodeIntegration: true
}
复制代码

解决问题3

Happy Ending

作者：Melody5417
链接：https://juejin.im/post/5eeb5113e51d45740950c661
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。