开发配置 | Free FS

环境变量配置

Free FS 前端使用环境变量来配置不同环境下的 API 地址和其他配置项。

环境变量文件

在项目根目录下创建环境变量文件：

.env.development - 开发环境配置：

# API 基础路径
VITE_API_BASE_URL=http://localhost:8080

.env.production - 生产环境配置：

# 生产环境 API 基础路径
VITE_API_BASE_URL='https://api.example.com'

环境变量说明

`VITE_API_BASE_URL`

作用：配置后端 API 服务的基础地址。

说明：

前端所有 API 请求都会以 /apis 作为路径前缀
完整的 API 请求地址为：${VITE_API_BASE_URL}/apis/...
例如：http://localhost:8080/apis/user/login

配置示例：

# 开发环境
VITE_API_BASE_URL=http://localhost:8080

# 生产环境
VITE_API_BASE_URL='https://api.example.com'

接口路径说明

前端所有 API 请求都使用 /apis 作为路径前缀，例如：

登录接口：POST /apis/user/login
文件上传：POST /apis/file/upload
文件列表：GET /apis/file/list

注意：确保后端服务也配置了 /apis 路径前缀，或者通过 Nginx 反向代理将 /apis 转发到后端服务。

Vite 配置说明

Free FS 前端使用 Vite 6 作为构建工具，主配置文件为项目根目录下的 vite.config.ts。

常用配置项

路径别名：如 @ → src/
开发服务器：端口、代理等
构建优化：代码分割、压缩等

代理配置（开发环境）

如需在开发环境代理 API，可在 vite.config.ts 的 server.proxy 中配置：

export default defineConfig({
  server: {
    proxy: {
      '/apis': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

注意：若后端已提供 /apis 前缀，也可直接通过环境变量 VITE_API_BASE_URL 配置，无需代理。

Nginx 配置（生产环境）

在生产环境中，若前端与后端同域部署，需配置 Nginx 反向代理：

server {
    listen 80;
    server_name example.com;

    # 前端静态资源
    location / {
        root /path/to/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 代理（路径前缀 /apis）
    location /apis/ {
        proxy_pass http://localhost:8080/apis/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 文件预览服务代理
    location /preview/ {
        proxy_pass http://localhost:8080/preview/;
        proxy_set_header Host $host;
    }
}

常见问题

Q: 接口请求 404？

A: 请检查：VITE_API_BASE_URL 是否正确、后端是否已启动、是否配置了 /apis 前缀或 Nginx 代理。

Q: 开发环境无法访问接口？

A: 请检查：后端是否启动、是否存在 .env.development、浏览器控制台是否有 CORS 报错（需后端允许跨域）。

Q: 生产环境接口失败？

A: 请检查：生产环境变量、Nginx 代理、后端服务与防火墙设置。

Q: 如何区分环境？

A: 使用不同环境变量文件：.env.development（开发）、.env.production（生产）、.env.local（本地覆盖，不提交 Git）。