亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

第一 配置package.json

package.json 里的 scripts 配置 serve test build，通過 --mode xxx 來執(zhí)行不同環(huán)境
通過 npm run serve 啟動本地 , 執(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",
}

第二 配置介紹 簡單說明 看詳情點擊上面tps

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

 比如,VUE_APP_MY_NAME = '活在風浪' 通過process.env.VUE_APP_MY_NAME 訪問。 

除了 VUE_APP_xxx 變量之外，在你的應用代碼中始終存在兩個默認變量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父文件夾中在新建一個baseURL.js里面寫的是判斷環(huán)境的代碼

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 開發(fā)環(huá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;

第五 

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

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

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

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

要使用一個插件 直接在vsc插件管理下載

總結:

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

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

相關文章

  • vue使用el-upload實現(xiàn)文件上傳功能

    vue使用el-upload實現(xiàn)文件上傳功能

    這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)

    element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)

    這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • 深入理解Vue nextTick 機制

    深入理解Vue nextTick 機制

    這篇文章主要介紹了深入理解Vue nextTick 機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫

    vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫

    這篇文章主要介紹了vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • 解決vue3報錯:找不到模塊或其相應的類型聲明

    解決vue3報錯:找不到模塊或其相應的類型聲明

    這篇文章主要給大家介紹了關于如何解決vue3報錯:找不到模塊或其相應的類型聲明的相關資料,這個錯誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應的類型聲明文件,需要的朋友可以參考下
    2023-07-07
  • vue-seamless-scroll 實現(xiàn)簡單自動無縫滾動且添加對應點擊事件的簡單整理

    vue-seamless-scroll 實現(xiàn)簡單自動無縫滾動且添加對應點擊事件的簡單整理

    vue-seamless-scroll是一個基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動，單步滾動，及支持水平方向的手動切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實現(xiàn)自動無縫滾動的效果，并對應添加點擊事件
    2023-01-01
  • vue中.env文件配置環(huán)境變量的實現(xiàn)

    vue中.env文件配置環(huán)境變量的實現(xiàn)

    本文主要介紹了vue中.env文件配置環(huán)境變量的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • vue中使用go()和back()兩種返回上一頁的區(qū)別說明

    vue中使用go()和back()兩種返回上一頁的區(qū)別說明

    這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • 詳解vue如何給特殊字段設置插槽

    詳解vue如何給特殊字段設置插槽

    這篇文章主要為大家詳細介紹了vue如何實現(xiàn)給特殊字段設置插槽,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以學習一下
    2023-09-09
  • vue3 學習筆記之a(chǎn)xios的使用變化總結

    vue3 學習筆記之a(chǎn)xios的使用變化總結

    本篇文章主要旨在幫助正在學vue3或者準備學vue3的同學了解網(wǎng)絡請求axios該如何使用，防止接觸了一點點vue3的同學會有個疑問。有興趣的小伙伴可以關注一下
    2021-11-11

最新評論