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)境判斷)

使用不同的命令請(qǐng)求的網(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直接打開是相對(duì)電腦盤符的

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

總結(jié):

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

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

您可能感興趣的文章:

相關(guān)文章

vue使用el-upload實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了vue使用el-upload實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
深入理解Vue nextTick 機(jī)制
這篇文章主要介紹了深入理解Vue nextTick 機(jī)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明的相關(guān)資料,這個(gè)錯(cuò)誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類型聲明文件,需要的朋友可以參考下
2023-07-07
vue-seamless-scroll 實(shí)現(xiàn)簡單自動(dòng)無縫滾動(dòng)且添加對(duì)應(yīng)點(diǎn)擊事件的簡單整理
vue-seamless-scroll是一個(gè)基于Vue.js的簡單無縫滾動(dòng)組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動(dòng)，單步滾動(dòng)，及支持水平方向的手動(dòng)切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實(shí)現(xiàn)自動(dòng)無縫滾動(dòng)的效果，并對(duì)應(yīng)添加點(diǎn)擊事件
2023-01-01
vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue中使用go()和back()兩種返回上一頁的區(qū)別說明
這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
詳解vue如何給特殊字段設(shè)置插槽
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下
2023-09-09
vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)
本篇文章主要旨在幫助正在學(xué)vue3或者準(zhǔn)備學(xué)vue3的同學(xué)了解網(wǎng)絡(luò)請(qǐng)求axios該如何使用，防止接觸了一點(diǎn)點(diǎn)vue3的同學(xué)會(huì)有個(gè)疑問。有興趣的小伙伴可以關(guān)注一下
2021-11-11