準(zhǔn)備

1、node.js 環(huán)境
2、@vue-cli3 腳手架

本示例所用版本為：

• Node.js: 16.13.2
• Electron: 18.3.5

項目搭建

1、創(chuàng)建 vue 項目

自定義選擇預(yù)裝組件： stylus babel typescript router vuex

vue create electron-template

2、添加 electron-builder 打包工具，并選擇 electron 版本進(jìn)行安裝

vue add electron-builder

3、運行完成后在src目錄下會生成 background.ts 文件(electron入口文件)，通過package.json中的"main": "background.js"引入。

package.json 的 scripts 中自動生成electron運行及打包指令

4、更換electron版本（可選）

如果想要更換electron版本，可以重新選擇指定版本進(jìn)行安裝

只需將 electron 版本號手動更改為目標(biāo)版本號后，執(zhí)行 npm install 重新安裝依賴即可，完成后查看當(dāng)前項目內(nèi)electron版本號（npm ls electron），可以看到已經(jīng)更換過來了。

5、運行項目

npm run electron:serve

6、如果運行過程出現(xiàn)的報錯及解決方案

①、ts-loader 報錯

這是由于 ts-loader 版本過高，在 package-lock.json 中發(fā)現(xiàn)當(dāng)前 ts-loader 版本為 ^9.2.5，只需在 package.json 中固定版本，重新更新依賴，即可成功運行項目

②、Vue Devtools 未成功安裝（由于網(wǎng)絡(luò)問題）

解決方案有兩種：

A： 不需要調(diào)試工具的情況下，直接將 background.ts 中的引入及引用去掉即可：

import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e: any) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }

B： 安裝vue-devtools

• 從github克隆vue-devtools:

git clone https://github.com/vuejs/vue-devtools

• 切換到add-remote-devtools分支，默認(rèn)為main

git checkout add-remote-devtools

• 安裝依賴：

npm install

• 修改shells/chrome目錄下的manifest.json，將 persistent 的值由 false 改為 true

• 打包：

npm run build

• 最后只需在 background.ts 中引入即可：

import { app, protocol, BrowserWindow, session } from 'electron';
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    session.defaultSession.loadExtension('D:/Project/diy-project/electron-demo/vue-devtools/shells/chrome');
  }
  createWindow()
})

• 呈現(xiàn)效果：