目錄

• 第一 配置package.on
• 第二 配置介紹 簡單說明 看詳情點選上面tps
• 第三 在根目錄新建檔案
• 第四
• 第五
• 總結:

第一 配置package.json

package.json 裡的 scripts 配置 serve test build，通過 --mode xxx 來執行不同環境
通過 npm run serve 啟動本地,執行 development
通過 npm run test 打包測試,執行 testing
通過 npm run build 打包正式,執行 production

"scripts": {
  "serve": "-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_NAMkivHUXE= '活在風浪'通過process.env.VUE_APP_MY_NAME訪問。 

除了VUE_APP_xxx變數之外，在你的應用程式碼中始終存在兩個預設變數NODE_ENV和BASE_URL

第三 在根目錄新建檔案

• .env.development 本地開發環境配置
• 內容如下

NODE_ENV='developmentwww.cppcns.com'

• .env.staging 測試環境配置

NODE_ENV='production'

• .env.production 正式環境配置

 NODE_ENV='production'

第四

檔案已建立完畢,下一步該封裝baseURL了,如果你封裝了axios,在你的axios父資料夾中在新建一個baseURL.js裡面寫的是判斷環境的程式碼

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 開發環境  因為我這裡寫了配置跨域的重定路徑所以是api
    baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
    // 正式環境
    baseURL = "https://www.baidu.com";
} else {
    // 測試環境
    baseURL = "https://www.ceshi.com";
}
export default baseURL;

第五

匯出baseURL 在封裝axsio的地方匯入baseURL 將公共地址換成baseURL變數 (baseURL變數就是寫的環境判斷)

使用不同的命令 請求的網址就不一樣 如

//啟動本地伺服器
npm run serve
//啟動打包命令
npm run build
//啟動測試環境命令
npm run test

說一個細節:如果執行打包命令,dist中index.html直接開啟是相對電腦碟符的

要使用一個外掛 直接在vsc外掛管理下載

總結:

先配置package.json 在新建需要檔案 然後寫判斷環境程式碼

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!