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:
113
docs/FRONTEND_FIX.md
Normal file
113
docs/FRONTEND_FIX.md
Normal 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
|
||||
**状态**: ✅ 已修复,需要重启服务
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user