Files

dazhuang 521a53d4f6 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

2026-03-22 02:59:20 +00:00

1.8 KiB

Raw Blame History

前端报错修复说明

🐛 问题原因

错误信息:

Failed to resolve import "@/stores/function" from "src/views/CreateFunction.vue"

原因: Vite 配置缺少 @ 路径别名，无法解析 @/stores/function 导入路径。

✅ 已修复

已在 frontend/vite.config.js 中添加路径别名配置：

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // ...
})

🔄 重启服务

修复后需要重启前端服务才能生效：

方式 1: 使用重启脚本（推荐）

./restart.sh

方式 2: 手动重启

停止服务:

# 停止后端
pkill -f "python.*app.main"

# 停止前端
pkill -f "vite"

启动服务:

./start.sh

方式 3: 仅重启前端

如果后端正常，只需重启前端：

# 停止前端
cd frontend
pkill -f "vite"

# 启动前端
npm run dev

🧪 验证修复

重启后访问 http://localhost:5173，应该不再报错。

检查前端日志：

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 配置路径别名需要：

导入 path 模块
在 resolve.alias 中配置
使用 path.resolve(__dirname, './src') 解析绝对路径

修复时间: 2026-03-22 状态: ✅ 已修复，需要重启服务

1.8 KiB Raw Blame History Unescape Escape