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: [email protected] requires a peer of ajv@^5.0.0 but none is installed

採用工程初始的package dependency版本配置，會有一個warnning。

npm WARN [email protected] 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
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。