前端服务配置详解：从入门到实战
前端服务配置详解：从入门到实战
一、环境配置文件（.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类型支持
- 可维护性：清晰的版本控制记录
建议定期检查配置文件，及时更新依赖版本，保持配置与业务需求的同步发展。