Electron + Vue3 + TS + sqlite3項目搭建

基礎環境

• node v16.15.0
• npm v8.5.5
• yarn v1.22.19

安裝vue-cli

$ npm install @vue/cli@5.0.8 -g
// 等待安裝完成
$ vue -V
// @vue/cli 5.0.8

創建vue項目

$ vue create project

選擇自定義配置

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

選中自己項目需要的配置

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
>( ) E2E Testing

選擇vue 3.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

后面各種配置參考

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

開始自動構建

Vue CLI v5.0.8
?  Creating project in ***\project.
??  Initializing git repository...
??  Installing CLI plugins. This might take a while...
// 等待項目構建

集成Electron

$ cd project
$ vue add electron-builder
// 等待vue-cli-plugin-electron-builder安裝

選擇13.0.0版本繼續

? Choose Electron Version (Use arrow keys)
  ^11.0.0
  ^12.0.0
> ^13.0.0
// 等待安裝完成

錯誤修復1

在Electron安裝過程中有警告提示

 WARN  It is detected that you are using Vue Router. It must function in hash mode to work in Electron. Learn more at https://goo.gl/GM1xZG .

大致意思就是 在electron中 vue 只能使用hash模式。history模式不支持
找到文件目錄src\router\index.ts:1:1

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 改為
import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'

找到文件目錄src\router\index.ts:20:1

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// 改為
const router = createRouter({
  history: process.env.IS_ELECTRON ? createWebHashHistory(process.env.BASE_URL) : createWebHistory(process.env.BASE_URL),
  routes
})

啟動項目

$ npm run electron:serve

錯誤修復2

不出意外的話項目不能正常啟動

-  Bundling main process...ERROR in src/background.ts:63:56
TS2571: Object is of type 'unknown'.
    61 |       await installExtension(VUEJS3_DEVTOOLS)
    62 |     } catch (e) {
  > 63 |       console.error('Vue Devtools failed to install:', e.toString())
       |                                                        ^
    64 |     }
    65 |   }
    66 |   createWindow()

ts規范下模板也逃不過,找到文件src/background.ts:63:56

try {
  await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
  console.error('Vue Devtools failed to install:', e.toString())
}
// 改為
try {
  await installExtension(VUEJS3_DEVTOOLS)
} catch (e: any) {
  console.error('Vue Devtools failed to install:', e.toString())
}

錯誤修復3

禍不單行，提示方法找不到

error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (E:\workCode\test\electron2vue3\project\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (E:\workCode\test\electron2vue3\project\node_modules\ts-loader\dist\index.js:14:21)

 @ multi ./src/background.ts

使用ts-loader@~8.2.0

$ npm i ts-loader@~8.2.0 -D

錯誤修復4

啟動過程要等待很長時間，這是因為installExtension方法會持續請求安裝VUEJS3_DEVTOOLS，然后導致項目啟動非常慢，必須等它五次請求超時后，才能啟動項目

INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
libpng warning: iCCP: cHRM chunk does not match sRGB

找到文件src/background.ts:5:1

import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
// 注釋掉
// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'

找到文件src/background.ts:60:5

try {
  await installExtension(VUEJS3_DEVTOOLS)
} catch (e: any) {
  console.error('Vue Devtools failed to install:', e.toString())
}
// 注釋掉
// try {
//   await installExtension(VUEJS3_DEVTOOLS)
// } catch (e: any) {
//   console.error('Vue Devtools failed to install:', e.toString())
// }

錯誤修復5

如果我們將頁面改為setup語法糖就會出現以下錯誤

'defineProps' is not defined  no-undef

找到文件.eslintrc.js:4:1

// 在env里加入屬性
'vue/setup-compiler-macros': true

安裝sqlite3

$ npm install sqlite3@5.0.0 -s  
$ npm install @types/sqlite3@3.1.8 -s

安裝完成后在src/main.ts:7:1插入如下代碼進行測試

import sqlite3 from 'sqlite3'
console.log(sqlite3)

錯誤修復6

加入sqlite3測試代碼后頁面出現數不清的報錯，這是因為vue配置中沒有添加node支持
找到文件vue.config.js:4:1

// exports對象中加入配置
pluginOptions:{
  electronBuilder:{
    nodeIntegration:true
  }
}

package.json

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@types/sqlite3": "^3.1.8",
    "core-js": "^3.8.3",
    "sqlite3": "^5.0.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "ts-loader": "^8.2.0",
    "typescript": "~4.5.5",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  }
}