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）代码解析