前端服务配置详解：从入门到实战
一、环境配置文件（.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 最佳实践
- 配置文件变更单独提交
- 提交信息使用标准前缀：
-
- feat: 新增功能
- fix: 问题修复
- docs: 文档更新
- refactor: 代码重构
总结
通过合理配置前端服务，我们可以实现：
- 环境隔离：开发/生产环境灵活切换
- 统一管理：请求配置集中维护
- 错误处理：全局异常捕获机制
- 类型安全：完善的TS类型支持
- 可维护性：清晰的版本控制记录
建议定期检查配置文件，及时更新依赖版本，保持配置与业务需求的同步发展。
)
