开发配置 | Free FS

环境变量配置

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

环境变量文件

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

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

# 开发环境接口前缀
VITE_API_BASE_URL='http://localhost:8080'
# 预览服务地址前缀
VITE_API_VIEW_URL='http://localhost:8080'

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

# 生产环境接口前缀
VITE_API_BASE_URL='https://api.example.com'
# 预览服务地址前缀
VITE_API_VIEW_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'

`VITE_API_VIEW_URL`

作用：配置文件预览服务的基础地址。

说明：

用于文件预览功能的 URL 前缀
通常与 VITE_API_BASE_URL 相同，但也可以指向不同的服务

配置示例：

# 开发环境
VITE_API_VIEW_URL='http://localhost:8080'

# 生产环境（如果预览服务独立部署）
VITE_API_VIEW_URL='https://preview.example.com'

接口路径说明

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

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

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

Vite 配置说明

Free FS 前端使用 Vite 作为构建工具，配置文件位于 config/ 目录下。

配置文件结构

config/
├── vite.config.base.ts      # 基础配置（公共配置）
├── vite.config.dev.ts       # 开发环境配置
└── vite.config.prod.ts      # 生产环境配置

基础配置 (vite.config.base.ts)

基础配置包含所有环境共享的配置：

插件配置：
- @vitejs/plugin-vue - Vue 3 支持
- @vitejs/plugin-vue-jsx - JSX 支持
- vite-svg-loader - SVG 文件加载
- vite-plugin-monaco-editor-esm - Monaco Editor 支持
- Arco Design 样式自动导入插件
路径别名：
- @ → src/
- assets → src/assets/
CSS 预处理器：Less 配置
依赖优化：排除 Monaco Editor 的预构建

开发环境配置 (vite.config.dev.ts)

开发环境配置继承基础配置，并添加开发特定配置：

开发服务器：
- host: '0.0.0.0' - 允许外部访问
- open: true - 自动打开浏览器
- fs.strict: true - 严格的文件系统访问
插件：
- vite-plugin-eslint - ESLint 检查

生产环境配置 (vite.config.prod.ts)

生产环境配置继承基础配置，并添加生产构建优化：

代码压缩和优化
资源打包和分割
图片压缩
Gzip/Brotli 压缩

代理配置（开发环境）

如果需要配置开发环境的 API 代理，可以在 vite.config.dev.ts 中添加：

server: {
  proxy: {
    '/apis': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/apis/, '/apis'),
    },
  },
}

注意：如果后端服务已经配置了 /apis 路径前缀，通常不需要配置代理，直接使用环境变量即可。

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: 检查：

环境变量 VITE_API_BASE_URL 是否正确
Nginx 代理配置是否正确
后端服务是否正常运行
防火墙是否允许访问

Q: 如何区分不同环境的配置？

A: 使用不同的环境变量文件：

.env.development - 开发环境
.env.production - 生产环境
.env.local - 本地覆盖（不会被提交到 Git）