dazhuang
521a53d4f6
- 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
113 lines
1.8 KiB
Markdown
113 lines
1.8 KiB
Markdown
# 前端报错修复说明
|
||
|
||
## 🐛 问题原因
|
||
|
||
**错误信息:**
|
||
```
|
||
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
|
||
**状态**: ✅ 已修复，需要重启服务 |