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

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

一、环境配置文件（.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. 可维护性：清晰的版本控制记录

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