欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue配置環(huán)境變量的正確打開方式

 更新時(shí)間：2022年01月07日 15:22:25   作者：0.活在風(fēng)浪里  
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

第一 配置package.json

package.json 里的 scripts 配置 serve test build，通過 --mode xxx 來執(zhí)行不同環(huán)境
通過 npm run serve 啟動(dòng)本地 , 執(zhí)行 development
通過 npm run test 打包測試 , 執(zhí)行 testing
通過 npm run build 打包正式 , 執(zhí)行 production
"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

第二 配置介紹 簡單說明 看詳情點(diǎn)擊上面tps

 以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。

 比如,VUE_APP_MY_NAME = '活在風(fēng)浪' 通過process.env.VUE_APP_MY_NAME 訪問。 

除了 VUE_APP_xxx 變量之外，在你的應(yīng)用代碼中始終存在兩個(gè)默認(rèn)變量NODE_ENV 和BASE_URL

第三 在根目錄新建文件

  • .env.development 本地開發(fā)環(huán)境配置
  • 內(nèi)容如下
NODE_ENV='development'
  • .env.staging 測試環(huán)境配置
NODE_ENV='production'
  • .env.production 正式環(huán)境配置
 NODE_ENV='production'

第四 

文件已建立完畢,下一步該封裝baseURL了,如果你封裝了axios,在你的axios父文件夾中在新建一個(gè)baseURL.js里面寫的是判斷環(huán)境的代碼

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 開發(fā)環(huán)境  因?yàn)槲疫@里寫了配置跨域的重定路徑所以是api
    baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
    // 正式環(huán)境
    baseURL = "https://www.baidu.com";
} else {
    // 測試環(huán)境
    baseURL = "https://www.ceshi.com";
}
export default baseURL;

第五 

導(dǎo)出baseURL  在封裝axsio的地方導(dǎo)入baseURL 將公共地址換成 baseURL變量 (baseURL變量就是寫的環(huán)境判斷)

使用不同的命令 請求的網(wǎng)址就不一樣 如

//啟動(dòng)本地服務(wù)器
npm run serve
//啟動(dòng)打包命令
npm run build
//啟動(dòng)測試環(huán)境命令
npm run test

說一個(gè)細(xì)節(jié):如果運(yùn)行打包命令,dist中index.html直接打開是相對電腦盤符的

要使用一個(gè)插件 直接在vsc插件管理下載

總結(jié):

先配置package.json 在新建需要文件 然后寫判斷環(huán)境代碼

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評論