frontend

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

环境变量配置

项目支持通过环境变量配置后端地址，用于开发和生产环境。

配置方式

1. 开发环境：创建 .env 文件
2. 生产环境：创建 .env.production 文件

环境变量说明

• VITE_API_BASE_URL: 后端 API 基础地址（包含 /api 路径）

  • 开发环境默认: http://localhost:5070/api
  • 生产环境默认: /api (同站点部署)

• VITE_BACKEND_BASE_URL: 后端服务器地址（不含 /api 路径，用于预览等功能）

  • 开发环境默认: http://localhost:5070
  • 生产环境默认: 当前域名 (window.location.origin)

配置示例

开发环境 (.env)

VITE_API_BASE_URL=http://localhost:5070/api
VITE_BACKEND_BASE_URL=http://localhost:5070

生产环境 (.env.production)

VITE_API_BASE_URL=https://api.yourdomain.com/api
VITE_BACKEND_BASE_URL=https://api.yourdomain.com

或者如果 API 和前端在同一域名：

VITE_API_BASE_URL=/api
VITE_BACKEND_BASE_URL=https://yourdomain.com

💡 提示：修改环境变量后需要重新构建前端项目 (npm run build)