前端服务配置详解：从入门到实战

前端服务配置详解：从入门到实战

一、环境配置文件（.env）

1.1 基础结构

在项目根目录创建 .env 文件：

# 开发环境
VUE_APP_API_BASE_URL = http://localhost:3000/api
VUE_APP_VERSION = 1.0.0

# 生产环境（.env.production）
VUE_APP_API_BASE_URL = https://api.yourdomain.com

🔑 作用说明：

• VUE_APP_ 开头的变量会被自动加载
• 不同环境使用不同配置文件（.env.development / .env.production）
• 敏感信息应放入 .env.local（该文件不会被Git跟踪）

1.2 实战技巧

// 在axios配置中使用
const baseURL = process.env.VUE_APP_API_BASE_URL;

// 在代码中获取版本号
console.log(`当前版本：${process.env.VUE_APP_VERSION}`);

⚠️ 注意事项：

• 修改.env文件后需要重启服务
• 变量名必须大写+下划线格式
• 不要提交包含敏感信息的.env文件到版本库

二、Axios全局配置

2.1 创建实例

// src/config/axios.ts
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

2.2 请求拦截器

service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

2.3 响应拦截器

service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return response.data;
    }
    return Promise.reject(response);
  },
  (error) => {
    if (error.response.status === 401) {
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

三、类型定义规范

3.1 请求头类型

// src/types/headers.ts
export interface HeadersType {
  'Content-Type': string;
  Authorization?: string;
  'X-Request-Tag'?: string;
}

export const defaultHeaders = {
  'Content-Type': 'application/json',
  'X-Request-Tag': 'web-2023'
};

3.2 API响应类型

// src/types/response.ts
export interface ApiResponse<T = any> {
  code: number;
  data: T;
  message: string;
  timestamp: number;
}

四、请求方法封装

4.1 GET请求示例

export const get = async <T>(url: string, params?: object): Promise<ApiResponse<T>> => {
  try {
    const response = await service.get(url, { params });
    return response.data;
  } catch (error) {
    console.error('GET请求错误:', error);
    throw error;
  }
};

4.2 POST请求示例

export const post = async <T>(url: string, data: object): Promise<ApiResponse<T>> => {
  try {
    const response = await service.post(url, data);
    return response.data;
  } catch (error) {
    console.error('POST请求错误:', error);
    throw error;
  }
};

五、跨域解决方案

5.1 Vue项目配置

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

5.2 生产环境处理

# Nginx配置示例
location /api/ {
  proxy_pass http://backend-server/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

六、版本控制规范

6.1 提交示例

git commit -m "feat(config): 添加axios拦截器配置
- 新增请求头自动注入
- 添加401状态码处理
- 优化类型定义"

6.2 最佳实践

1. 配置文件变更单独提交
2. 提交信息使用标准前缀：

• • feat: 新增功能
  • fix: 问题修复
  • docs: 文档更新
  • refactor: 代码重构

总结

通过合理配置前端服务，我们可以实现：

1. 环境隔离：开发/生产环境灵活切换
2. 统一管理：请求配置集中维护
3. 错误处理：全局异常捕获机制
4. 类型安全：完善的TS类型支持
5. 可维护性：清晰的版本控制记录

建议定期检查配置文件，及时更新依赖版本，保持配置与业务需求的同步发展。