使用electron-vue時遇到的問題及解決

1. 安裝yarn及本地模塊依賴

推薦使用管理員進行安裝（win10右擊開始欄windows選擇Windows PowerShell(管理員)）

npm install --global yarn
npm install -g node-gyp
npm install --global --production windows-build-tools

2. 創建electron-vue項目

// 創建項目
vue init simulatedgreg/electron-vue my-project
// 安裝依賴(有條件可通過科學上網進行安裝，否則有些地方會卡住)
cd my-project
yarn // 或者 npm install
yarn run dev // 或者 npm run dev

3. 運行項目時遇到的問題

3.1. process is not defined

在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中找到HtmlWebpackPlugin代碼段並更改爲如下代碼：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

3.2. vue-devtools報錯

點此處下載devTools.zip並解壓放在項目根目錄中 提取碼: aa84

修改 src/main/index.dev.js

// Install `vue-devtools`
require('electron').app.on('ready', () => {

  // 註釋掉的這部分是 Electron-Vue 中預裝devtool的代碼，沒有用
  // let installExtension = require('electron-devtools-installer')
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })

  // 新增的：安裝vue-devtools
  BrowserWindow.addDevToolsExtension(path.resolve(__dirname, '../../devTools/vue-devtools'));
  
});

4.打包項目時遇到的問題(使用 electron builder)

4.1. 打包時報錯app-builder

4.1.1 下載打包所必需的文件

nsis-resource-3.3.0.zip 提取碼：7hb7
nsis-3.0.3.2 提取碼：b444
winCodeSign-2.4.0 提取碼:3ee9
electron-v2.0.18-win32-x64.zip 提取碼：nrq3
chromedriver-v1.8.0-win32-x64.zip 提取碼：gi8d

4.1.2. 打開 C:\Users\Administrator\AppData\Local\，按如下目錄存放下載的文件

• electron
  • Cache
    • chromedriver-v1.8.0-win32-x64.zip
    • electron-v2.0.18-win32-x64.zip

解壓nsis-resource-3.3.0.zip，nsis-3.0.3.2，winCodeSign-2.4.0

• electron-builder
  • Cahe
    • nsis
      • nsis-3.0.3.2(解壓後的文件)
      • nsis-resource-3.3.0(解壓後的文件)
    • winCodeSign
      • winCodeSign-2.4.0(解壓後的文件)

4.2. 運行時日誌中報錯"Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js

4.2.1 在main/index.dev.js文件中找到require(‘electron-debug’)({ showDevTools: true });修改爲

 // NB: Don't open dev tools with this, it is causing the error
 require('electron-debug')();

4.2.2 在 main/index.js文件中找到 mainWindow.loadURL(winURL);在下方添加：

 // Open dev tools initially when in development mode
  if (process.env.NODE_ENV === "development") {
    mainWindow.webContents.on("did-frame-finish-load", () => {
      mainWindow.webContents.once("devtools-opened", () => {
        mainWindow.focus();
      });
      mainWindow.webContents.openDevTools();
    });
  }