为什么要配置多个环境变量？在一个产品的开发过程中，一般来说都会经历这样一个过程。本地分发开启--测试版本部署--测试--预发布--正式发布。每个链接中的服务器地址和接口地址都会不同。那么我们如何处理这种情况。如何配置环境变量在vue-cli3.0脚手架搭建的项目根目录新建.env.[model]文件。模型是一个变量。您可以使用此模型的变量值来确定它当前属于哪个环境。模型可以根据自己的需要修改，对应的key-value对写在文件中。根据需要创建尽可能多的环境。在根目录下，创建尽可能多的.env.[model]文件，如下图所示：.env.prod文件：NODE_ENV="production"VUE_APP_URL="prod".env.dev文件：NODE_ENV="production"VUE_APP_URL="dev"注意：配置环境的字段需要以VUE_APP开头，这样才能被webpack识别。现在我们来到配置文件。这个配置文件的作用是判断当前打包环境是生产还是测试，还是本地。当然，你也可以有很多环境。在配置文件中，我们通过全局字段process.env.VUE_APP_URL来判断环境，然后匹配对应的接口地址。注意上面的NODE_ENV="production"不能省略，vue-cli3.0会根据NODE_ENV="production"判断是否是生产环境，如果改了这个，会默认为NODE_ENV="development,developmentandproductionmode包结构会有所不同，为了保持一致，配置文件的第一个字段应该设置为NODE_ENV="production"。package.json文件下的脚本"start":"vue-cli-serviceserve--modelocation","dev":"vue-cli-servicebuild--modedev","prod":"vue-cli-servicebuild--modeprod”脚本中的nodedist-start.js是我打包项目后需要在本地启动查看的代码，可以忽略。上面提到的.env.[model]文件，文件名中的model对应package.json文件中的打包脚本--model[model]。比如：我现在要打包官方环境的时候，官方环境对应的.env.[model]就是.env.prod。在package.json的脚本中添加“prod”：“vue-cli-servicebuild--modeprod”，prod是配置文件名对应的model，这样webpack在打包的时候会自动跟踪这个文件并读取它各种配置字段，我们可以在项目的任意位置通过process.env.xx获取xx配置属性。package.json文件的脚本配置如下：现在我们只需要运行相应的脚本命令就可以打包对应环境的项目代码，例如：我需要在prod环境下打包项目，运行npm在控制台运行prod，执行官方环境打包。运行npmrundev打包测试环境。此模式还可用于自动化部署。如有不妥或写得不好的地方，欢迎指出，有疑问的同学欢迎提问！
