前端服務配置詳解：從入門到實戰
一、環境配置文件（.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類型支持
- 可維護性：清晰的版本控制記錄
建議定期檢查配置文件，及時更新依賴版本，保持配置與業務需求的同步發展。
)
