2025 最新最全 Vite5+Electron+SQLite3+Vue3 工程搭建指南
1 组件说明
操作系统：windows 11
| 组件 | 版本 | 说明 |
|---|---|---|
| Vite | 5.1.6 | 前端构建工具 |
| ESLint | 9.25.1 | 代码问题发现和修复共建 |
| Prettier | 3.5.3 | 一个流行的开源代码格式化工具 |
| TypeScript | 5.2.2 | 一种由微软开发的自由开源编程语言，它是 JavaScript 的一个超集 |
| Electron | 30.0.1 | 构建跨平台桌面应用程序的开源框架 |
| better-sqlite3 | 11.9.1 | SQLite数据库驱动 |
| Vue3 | 3.4.21 | 用于构建用户界面的渐进式JavaScript框架 |
| Vue Router | 4.5.0 | 是 Vue.js 的官方路由管理器 |
| Element Plus | 2.9.7 | 基于 Vue 3 的企业级 UI 组件库 |
| Pinia | 3.0.1 | 用于 Vue 的状态管理库 |
| Tailwind CSS | 4.1.3 | 一个高度可定制的、低级别的 CSS 框架 |
| Axios | 1.8.4 | 一个基于 Promise 的 HTTP 客户端 |
| Zod | 3.24.3 | 用于 TypeScript 和 JavaScript 的类型定义和数据验证库 |
2 Node.js 安装配置
本文的Node.js版本号v20.19.0，请先进行安装，推荐用nvm安装管理，网上教程较多不再赘述。
[[1-nodejs环境安装配置]]
2.1 加速镜像配置
- 打开npm的配置文件
# cmd 运行打开配置文件
> npm config edit
- 在空白地方添加淘宝镜像，下面三个（缺什么补什么，但要是同一个公司单位的镜像）
registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
3 搭建项目
# 初始化工程
> npm create electron-vite
$ npm create electron-vite
> npx
> create-electron-vite
√ Project name: ... electron-vite-project
√ Project template: » Vue
Scaffolding project in E:\workspace_electron\test\electron-vite-project...
Done. Now run:
cd electron-vite-project
npm install
npm run dev
# 进入工程目录安装依赖
> npm install
# 运行命令
> npm run dev
# 编译命令
> npm run build
3.1 配置 Vite
3.1.1 设置静态文件拷贝
根据需要配置需要打包的静态文件，此处示例目的为打包初始化用的sql脚本。
> npm install fs-extra --save-dev
vite.config.ts文件做以下修改
import fs from "fs-extra";
...
fs.copySync(
path.resolve(__dirname, "./electron/script"),
path.resolve(__dirname, "./dist-electron/script"),
{ overwrite: true }
);
3.1.2 配置目录别名、不去除console.info/warn/error和sever
vite.config.ts文件做以下修改,此时端口已更改且默认打开浏览器
import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue()
],
base: "./",
resolve: {
alias: {
//(1) 目录别名
"@": path.resolve(__dirname, "./src"),
},
},
//(2) 仅去除console.log，默认不配会去除所有console
esbuild: {
drop: ["console", "debugger"],
},
// (3) server
server: {
hmr: true,
watch: {
// 忽略指定目录的文件变化,注意将运行过程中会发生变化的文件进行忽略，否则开发模式会导致Vite频繁热更新，触发Electron应用频繁重启
ignored: [
// 忽略 node_modules
"**/node_modules/**",
// 忽略特定目录，例如：
"**/dist/**",
"**/release/**",
"**/database/**"
// 可以添加更多需要忽略的目录
// '**/your-directory-to-ignore/**',
]
}
},
electron(..)//里面配置不动
})
3.2 配置 TypeScript
tsconfig.json做以下修改
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
// @设置
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.d.ts",
"electron"
],
"references": [{ "path": "./tsconfig.node.json" }]
}
3.3 配置 ESLint
用于语法检查。
- 安装
# 框架无关安装
> npm i eslint@latest -D
> npm i eslint-plugin-vue typescript-eslint -D
# 规则库（按需配置）
> npm i @stylistic/eslint-plugin -D
# vite额外安装（暂时用不到）
> npm i vite-plugin-eslint -D
- 配置命令
// package.json
{
"scripts": {
"lint": "eslint",
"lint:fix": "eslint --fix",
},
"devDependencies": {
"eslint": "^9.9.0",
}
}
- 初始化配置
npx eslint --init
# 根据自己需要一步一步选择生成配置
You can also run this command directly using 'npm init @eslint/config@latest'.
> [email protected] npx
> create-config
@eslint/create-config: v1.8.1
√ What do you want to lint? · javascript
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · no / yes
√ Where does your code run? · browser, node
The config that you've selected requires the following dependencies:
eslint, @eslint/js, globals, typescript-eslint, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
☕️Installing...
- 配置eslint.config.js
- 对于
typescript的更多规则配置，你可以在这里找到。- 还推荐用
@stylistic/eslint-plugin这个插件来提供更多的typescript和JavaScript的语法风格规则
export default defineConfig([
{
//忽略目录
ignores:['node_modules','dist','dist-electron','public']
},
{
//自定义规则
rules:{
'no-console':'error',
}
},
...
]);
- VSCode 安装 ESLint 插件，让VSCode可以根据配置规则进行提示。
- 安装Prettier，用于格式化。
# 步骤一：安装
## eslint-config-prettier 关闭与ESLint与Prettier冲突规则
## eslint-plugin-prettier 让ESLint直接使用Prettier进行格式检查
> npm i prettier eslint-config-prettier eslint-plugin-prettier -D
# 步骤二：eslint.config.js增加配置
require("eslint-config-prettier"),
{
files: ["**/*.{js,mjs,cjs,ts,vue}"]
},
{
plugins: {
prettier: require("eslint-plugin-prettier")
}
},
# 步骤三：设置prettier规则
根目录下创建.prettierrc.json文件
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "none"
}
# 步骤四：安装Prettier-Code formatter插件，让其自动格式化
# 步骤五：设置保存自动格式化
## 在vscode设置中，找到在setting.json中编辑，添加以下代码
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.validate": ["javascript", "typescript", "vue"],
"eslint.run": "onType",
"eslint.format.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
# 最后需要重启VSCode。
- 在
vite.config.js中进行配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
plugins: [
vue(),
eslintPlugin({
// 可以在这里传入自定义配置
// 默认会读取项目中的 .eslintrc.js 文件
failOnWarning: false,
failOnError: fasle,
emitWarning: true,
emitError: true,
})
]
});
- 命令行使用
npx eslint src --ext .js,.ts,.vue
# 整个工程
npx eslint .
# 指定目录
npx eslint src/ --fix
3.4 配置 better-sqlite3
- 安装
npm i -g node-gyp
# Electron 内置的 Node.js 版本和编译到 better-sqlite3 的 Node.js 版本不同将可能导致安装失败，所以此处需要安装 `electron-rebuild` 重建 Node.js 模块。（注意安装顺序，否则可能出现安装失败的问题）
npm i -D electron-rebuild
# 性能比普通的sqlite3更好
npm i -S better-sqlite3
npm i -S @types/better-sqlite3
- 修改package.json中的scripts
"scripts": {
...
"rebuild": "electron-rebuild -f -w better-sqlite3"
},
# 执行命令 npm run rebuild
- 遇到问题
# 问题一：解决初始化数据库报# ReferenceError: __filename is not defined
// Import the 'createRequire' function from the 'module' package
//主进程中
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
// Import better-sqlite3
const Database = require('better-sqlite3');
# 问题二：运行报sqlite3 node版本问题，重新执行npm run rebuild
3.5 配置日志
- 安装
npm install winston -S
npm install winston-daily-rotate-file -S
- 定义日志工具类
//在主进程中使用Log.js
import winston from "winston";
import "winston-daily-rotate-file";
import {
ipcMain } from "electron";
// 定义日志格式，包含时间戳
const logFormat = winston.format.combine(
winston.format.timestamp({
format: "YYYY-MM-DD HH:mm:ss" }), // 时间戳格式
winston.format.printf(({
timestamp, level, message }) => {
return `${
timestamp} [${
level}]: