vue配置命令打包不同的生产环境与测试环境 我们在打包VUE项目的时候通常会使用npm run build命令。但是我们经常要打包测试环境与生产环境，然而在打不同环境的包时候，某些配置项是不同的。我们每次通过手动来修改的话会非常繁琐。如果需要手动修改的地方过多的话，难免会有遗漏。目前我参与开发的项目就有3种不同的环境需要处理本地开发环境npm run dev服务器测试环境npm run build:stage生产环境npm run build:prod可以看到，除了本地开发环境用的是dev本地预览，其他两个打包命令都加上了后缀。我们就是通过后缀的命令来区分不同的打包环境。这里我使用vue-cli3的脚手架环境进行演示。首先vue里面配置node.js全局变量的文件是单独的一个.env文件。这里我们创建三种不同环境的.env文件。.env.development // 开发环境 .env.production // 生产环境 .env.testproduction // 测试环境文件创建好了放到vue项目的根目录即可（一定要注意文件名前面是有“.”的）。创建好了文件，我们在文件里面写上配置。这里以Axios的不同环境调用的接口做演示，其他部分举一反三# 标记 NODE_ENV = 'production' # base api VUE_APP_BASE_API = 'https://foo.foo.com' 这里解释一下。NODE_ENV这个是用来标记当前的环境是什么，等会儿会在vue里面用到下面的VUE_APP_BASE_API定义了一个接口的常量，等会儿也会用到。根据不同的环境写好配置文件以后，我们找到项目的package.json配置在scripts里可以看到build配置。我们把配置改为我们写好的三个"dev": "vue-cli-service serve --mode development", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode testproduction", 这里主要是注意后面增加了--mode xxxxx这些参数这个参数的作用是node根据我们刚刚创建的.env文件去编译里面的变量，让我们系统可以用。xxxxx是.env.后面的名称准备好这些以后，我们在VUE里面就可以使用process.env.NODE_ENV来判断当前的环境了。我在封装的axios里面，增加了一个switch判断，根据process.env.NODE_ENV判断当前的环境然后把api定义为VUE_APP_BASE_API即可。这样我们可以通过命令去打包不同的环境，而且每次打包也不用重新去更改接口了。其他配置基本是一致的，都是通过判断不同的环境获取到不同的配置而已