fix: add path alias configuration in vite.config.js

- Fix 'Failed to resolve import @/stores/function' error
- Add '@' alias pointing to './src' directory
- Enable cleaner import paths in Vue components

Before:
  import { useFunctionStore } from '@/stores/function'  // Error!

After:
  import { useFunctionStore } from '@/stores/function'  // Works!

Changes:
- Import 'path' module
- Configure resolve.alias in vite.config.js
- Add fix documentation
This commit is contained in:
2026-03-22 02:59:20 +00:00
parent 344a750cfb
commit 521a53d4f6
2 changed files with 119 additions and 0 deletions

113
docs/FRONTEND_FIX.md Normal file
View File

@@ -0,0 +1,113 @@
# 前端报错修复说明
## 🐛 问题原因
**错误信息:**
```
Failed to resolve import "@/stores/function" from "src/views/CreateFunction.vue"
```
**原因:** Vite 配置缺少 `@` 路径别名,无法解析 `@/stores/function` 导入路径。
## ✅ 已修复
已在 `frontend/vite.config.js` 中添加路径别名配置:
```javascript
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
// ...
})
```
## 🔄 重启服务
修复后需要重启前端服务才能生效:
### 方式 1: 使用重启脚本(推荐)
```bash
./restart.sh
```
### 方式 2: 手动重启
**停止服务:**
```bash
# 停止后端
pkill -f "python.*app.main"
# 停止前端
pkill -f "vite"
```
**启动服务:**
```bash
./start.sh
```
### 方式 3: 仅重启前端
如果后端正常,只需重启前端:
```bash
# 停止前端
cd frontend
pkill -f "vite"
# 启动前端
npm run dev
```
## 🧪 验证修复
重启后访问 http://localhost:5173应该不再报错。
检查前端日志:
```bash
tail -f logs/frontend.log
```
应该看到:
```
VITE vX.X.X ready in XXX ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.x.x:5173/
```
没有错误信息。
## 📝 技术说明
### Vite 路径别名
`@` 是 Vue 项目常用的路径别名,代表 `src` 目录:
- `@/stores/function``src/stores/function`
- `@/api/index``src/api/index`
- `@/components/XXX``src/components/XXX`
**好处:**
- 避免相对路径地狱(`../../../../../`
- 代码更清晰易读
- 重构时路径不变
### 配置说明
Vite 配置路径别名需要:
1. 导入 `path` 模块
2.`resolve.alias` 中配置
3. 使用 `path.resolve(__dirname, './src')` 解析绝对路径
---
**修复时间**: 2026-03-22
**状态**: ✅ 已修复,需要重启服务

View File

@@ -1,9 +1,15 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
server: {
host: '0.0.0.0', // 允许局域网访问
port: 5173,