vue-cli 3.0如何配置多种开发环境下的环境变量

为什么会需要配置多种环境变量

一个产品的开发过程中,一般来说都是会经历这么一个过程.本地发开--测试版本部署--测试--预上线--正式上线.对应的每一个环节中的服务器地址,接口地址...都会不一样。那么我们需要怎么去处理这种情况。

怎么去配置环境变量

vue-cli 3.0脚手架构建的项目根目录中新建一个.env.[model]文件,model为一个变量，可以通过这个model的变量值来判断当前属于哪个环境。model可以根据你的需求来修改，该文件中写上对应的键值对。你需要多少个环境，就创建多少个.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-cli 3.0 会根据NODE_ENV = "production"来判断是否是生产环境,如果你改变了这个就会被默认NODE_ENV = "development,development和production模式下打包出来的包结构会不同,为了一致性,所以配置文件的第一个字段应该设置成为NODE_ENV = "production"。

package.json文件下的脚本

    "start": "vue-cli-service serve --mode location",
    "dev": "vue-cli-service build --mode dev",
    "prod": "vue-cli-service build --mode prod"

script脚本中node dist-start.js是我打包项目之后需要在本地启动并查看的代码，可以忽略哦。

上面提到创建的.env.[model]文件，文件名中的model对应package.json文件中的打包脚本--model [model]。例如：当我现在想打包正式环境，正式环境对应.env.[model]就是.env.prod。在package.json的script中添加"prod": "vue-cli-service build --mode prod",prod这个对应配置文件名的model，这样webpack打包时会自动追踪到这个文件，并去读取其中的各种配置字段，我们在项目中任意位置就可以通过process.env.xx拿到其中的xx配置属性。package.json文件脚本配置如下：

现在我们只需要运行对应的脚本命令就可以打包对应环境的项目代码，例如：我现在需要打包prod环境下的项目，在控制台运行npm run prod，就可以执行正式环境打包。运行npm run dev,则可以打包测试环境。该模式也可用于自动化部署。

如有不对或者写的不好的地方欢迎提出，有问题的同学欢迎提问哦!