场景2：vite-electron-builder 集成（Sass、Prettier、路径别名）
概述
electron-vite 是基于 Vite 的 Electron 构建工具模板。本节介绍如何使用该模板快速搭建 Electron + Vue 3 项目，并集成 Sass 预编译、Prettier 代码格式化和路径别名等开发增强配置。
模板项目搭建
克隆模板
# 方式一：Git 克隆（使用加速镜像）
git clone https://github.com/nicedreamer/electron-vite-template.git v-electron-demo
# 方式二：下载 ZIP 包
# 直接在 GitHub 页面下载压缩包
# 安装依赖
cd v-electron-demo
pnpm install
bash
项目启动
# 调试模式（启动 Electron 窗口 + Vite 开发服务器）
pnpm dev
# 构建生产版本
pnpm build
bash
项目结构
v-electron-demo/
├── electron/ # Electron 主进程
│ ├── main.ts # 主进程入口
│ └── preload.ts # 预加载脚本
├── src/ # 渲染进程（Vue 应用）
│ ├── App.vue
│ ├── main.ts
│ └── assets/
├── scripts/
│ └── watch.js # 开发调试脚本
├── package.json
├── vite.config.ts # Vite 配置
└── electron-builder.yml # Electron Builder 打包配置
text
package.json 关键命令
{
"scripts": {
"dev": "node scripts/watch.js",
"build": "electron-builder"
}
}
json
开发增强配置
Sass 预编译集成
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/styles/variables.scss";`,
},
},
},
})
typescript
Prettier 配置
// .prettierrc
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100,
"endOfLine": "auto"
}
json
// package.json scripts
{
"scripts": {
"format": "prettier --write \"src/**/*.{ts,vue,scss}\""
}
}
json
路径别名配置
// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'@components': resolve(__dirname, 'src/components'),
'@views': resolve(__dirname, 'src/views'),
'@assets': resolve(__dirname, 'src/assets'),
},
},
})
typescript
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@views/*": ["src/views/*"]
},
"baseUrl": "."
}
}
json
Vue Router 与 Pinia 集成
// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'
const pinia = createPinia()
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', component: () => import('@views/Home.vue') },
],
})
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')
typescript
注意：Electron 应用中路由使用
createWebHashHistory（Hash 模式），不使用 History 模式。
实践要点
- 旧版 Vue 2 项目迁移到 Vite + Vue 3 有一定成本，需参考官方迁移指南
- Electron 构建中不需要 CDN 和 PWA 插件，通过环境变量做条件判断
electron-builder的版本需注意兼容性，Electron 28 暂不支持 ES Module 模式- 开发调试通过
node scripts/watch.js启动，同时运行 Vite 和 Electron 进程 - 生产构建的
base路径需要特别配置，确保资源路径在 Electron 中正确加载
↑