環境變量配置
-
在項目根目錄中新建.env, .env.production, .env.pre 等文件
-
NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用
-
一個環境文件只包含環境變量的“鍵=值”對:
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
- .env 文件
- ====> 執行 npm run serve 默認的本地開發環境配置
// 默認的本地開發環境配置 每行后面不要加結束分號
NODE_ENV = "development"
BASE_URL = "./"
// 打包后文件夾名字;默認dist;要在vue.config.js 中配置
// 只有以 VUE_APP 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端的包中，
// 代碼中可以通過 process.env.VUE_APP_BASE_API 訪問 這樣定義的值
// 在 vue.config.js 中可以獲取到 outputDir ,但是在客戶端代碼中無法獲取;
outputDir = "dist"
VUE_APP_API = "http://v.juhe.cn/joke"
- .env.production 文件
- ===>執行 npm run build 默認的環境配置（正式服務器）
// build 默認的環境配置（正式服務器）每行后面不要加結束分號
NODE_ENV = "production"
BASE_RUL = "./"
// 打包后文件夾名字;要在vue.config.js 中配置
outputDir = "dist_pro"
// 自定義的一些在客戶端要獲取的變量要以 VUE_APP_ 開頭,不然無法獲取到;
VUE_APP_OUT_PUTDIR = "dist_pro"
VUE_APP_API = "http://www.xxxx.com/api"
- .env.pre 文件
- ===>執行 npm run pre 自定義 build 環境配置（預發服務器）
//自定義 build 環境配置（預發服務器）每行后面不要加結束分號
NODE_ENV = "production"
BASE_URL = "./"
// 打包后文件夾名字; 要在vue.config.js 中配置
outputDir = "dist_pre"
VUE_APP_API = "http://www.自定義環境.com"
- package.json 一個模式有多中變量;
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pre": "vue-cli-service build --mode pre"
}
注意模式不同於 NODE_ENV，一個模式可以包含多個環境變量。
也就是說，每個模式都會將 NODE_ENV 的值設置為模式的名稱
比如在 development 模式下 NODE_ENV 的值會被設置為 "development"。;
你可以通過為 .env 文件增加后綴來設置某個模式下特有的環境變量。
比如，如果你在項目根目錄創建一個名為 .env.development 的文件，
那么在這個文件里聲明過的變量就只會在 development 模式下被載入。
你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。
例如，如果你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入;
"dev-build": "vue-cli-service build --mode development",
- index.vue
// index.vue 獲取最新的笑話
axios.get("/api/content/text.php",
{ baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
params:{key:'19a578542216aeb8a23ccf5b05a61449'},
headers:{'Content-Type':'application/json;charset=UTF-8'}
})
.then(res=>{
console.log('text result',res);
})
- http.js
// axios 封裝,(示例demo 所以參數寫死的);
// 本地開發環境的話要使用 devServer 代理來跨域;"development" 時 baseURL 設置為 "/";
// 使用devServer 代理時 baseURL不能設置值;
app.ajax = (url,method)=>{
return axios({
url:url,
baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
method:method,
params:{
key:'19a578542216aeb8a23ccf5b05a61449'
},
data:{
sort:'desc',
page:1,
pagesize:10,
time:parseInt( new Date().getTime()/1000),
key:'19a578542216aeb8a23ccf5b05a61449'
},
headers:{'Content-Type':'application/json;charset=UTF-8'},
})
}
export default app;
跨域代理配置
- 本地開發時會涉及到跨域問題;至於在服務端 請加跨域請求頭
- vue.config.js devServer 配置
// 注意使用devServer時 封裝的 http 請求中,baseURL不能設置值;
module.exports = {
outputDir:process.env.outputDir || 'dist',
// 由於瀏覽器有跨域限制,這里cli 工具提供了 啟動本地代理服務器 請求
devServer:{
open:false, // 是否打開瀏覽器;
hotOnly:true, // 是否熱更新;
proxy:{
'/api':{ // 路徑中有 /api 的請求都會走這個代理 , 可以自己定義一個,下面移除即可
target:'http://v.juhe.cn/joke', // 目標代理接口地址,實際跨域要訪問的接口,這個地址會替換掉 axios.defaults.baseURL
secure:false,
changeOrigin:true, // 開啟代理，在本地創建一個虛擬服務端
ws:true, // 是否啟用 websockets;
pathRewrite:{ // 去掉 路徑中的 /api 的這一截
'^/api':''
}
},
'/test':{
target:'http://v.juhe.cn/joke', // 目標代理接口地址,實際跨域要訪問的接口,這個地址會替換掉 axios.defaults.baseURL
secure:false,
changeOrigin:true,
ws:true,
pathRewrite:{
'^/test':'',
}
}
},
}
}
- 示例完整代碼github:[https://github.com/wJiaLiang/vue-cli4]
總結
- 代理配置 時 配置的主機地址 （即 baseURL） 應該為 "/"; 參考 http.js
- 真時的地址為 在 vue.config.js 中配置; 參考 vue.config.js 中 devServer 配置項
- 真時的接口地址為 'http://v.juhe.cn/joke/content/text.php'
- 瀏覽器看到的地址是: http://localhost:8080/api/content/text.php?key=19a578542216aeb8a23ccf5b05a61449