VUE配置不同的研發環境-測試、生產、開發

前言

之前只是在公司架構師搭建好框架並配置相關環境之後，去開發代碼。因業務需求，這次博主要自己配置前端環境。故寫此博客，希望對搭建有幫助。

需求

項目研發有：開發、測試、生產，三個環境，項目開發用的是開發環境，開發完成之後用測試環境，發佈到線上用的是生產環境。不同的環境既可以幫助研發人員實現編寫程序和改bug，又可以幫助測試人員更好的測試。非常的方便。

代碼實現

下面是vue環境下不同地址的環境配。

1.配置package.json

（1）源碼

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "production": "vue-cli-service serve --mode production" ,
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

（2）源碼解析

2.配置不同環境

3.打包到服務器上地址選擇

（1）源碼

VUE3.3以上版本
 outputDir: 'process.env.outputDir'
VUE3.3以下版本
 outputDir: 'process.env.VUE_APP_outputDir'

（2）代碼解析