1. 創(chuàng)建基本的.env文件
- 在項(xiàng)目根目錄（與package.json同級）創(chuàng)建一個(gè)名為.env的文件
- 在文件中添加環(huán)境變量，格式為KEY=VALUE
# .env - 所有環(huán)境通用配置
VUE_APP_BASE_URL=http://localhost:3000
VUE_APP_API_VERSION=v1
2. 創(chuàng)建不同環(huán)境的配置文件
為了區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，可以創(chuàng)建多個(gè).env文件：
.env.development：開發(fā)環(huán)境專用配置（npm run serve時(shí)使用）
.env.production：生產(chǎn)環(huán)境專用配置（npm run build時(shí)使用）
3. 文件優(yōu)先級
當(dāng)存在多個(gè).env文件時(shí)，Vue CLI會按照以下優(yōu)先級加載：
.env.[mode].local：本地覆蓋，會被git忽略
.env.[mode]：特定模式的環(huán)境變量
.env.local：本地覆蓋，會被git忽略
.env：默認(rèn)環(huán)境變量
4. 添加.gitignore保護(hù)敏感信息
確保.env.local和.env.[mode].local文件已經(jīng)在.gitignore中，避免將敏感信息（如API密鑰）提交到代碼倉庫：
# 在.gitignore中添加
.env.local
.env.*.local
5. 使用環(huán)境變量
創(chuàng)建完成后，你可以在項(xiàng)目中這樣使用：
// 在axiosHttp.js中（已實(shí)現(xiàn)）
const baseURL = process.env.VUE_APP_BASE_URL;
// 在組件中
console.log(process.env.VUE_APP_API_VERSION);
