Vue环境配置

前言

我们在开发中，可能有各种各样的环境，开发环境、测试环境、生产环境等等；
可能在代码中，存在某一个变量，在不同的环境下，它的值不一样，例如接口请求的地址；
为了方便这种情况的处理，vue为我们提供了env来配置这些环境变量；

一、创建环境变量文件

创建环境变量文件，需要在根目录下创建，并且以.env.开头；

• 1. 创建开发环境.env.development;

NODE_ENV = 'development'
VUE_APP_TITLE = '开发'

• 2.创建测试环境.env.test

NODE_ENV = 'tes'
VUE_APP_TITLE = '测试'

• 3.创建生产环境.env.production

NODE_ENV = 'production'
VUE_APP_TITLE = '生产'

属性名必须以VUE_APP_开头，比如VUE_APP_TITLE

二、使用环境变量文件中的属性

this.title = process.env.VUE_APP_TITLE

三、根据运行环境动态加载环境变量文件

需要在package.json文件中进行配置

"scripts": {
    // 默认serve加载.env.development
    "serve": "vue-cli-service serve",
    // mode指定加载.env.test
    "serve-test": "vue-cli-service serve --mode test",
    // mode指定加载.env.production
    "serve-prod": "vue-cli-service serve --mode production",
    // 默认build加载.env.production
    "build": "vue-cli-service build",
    // mode指定加载.env.development
    "build-dev": "vue-cli-service build --mode development",
    // mode指定加载.env.test
    "build-test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

在package.json中，通过--mode可以指定对应的环境变量文件；

后记

当我们使用绝对路径进行网络请求的时候，可以通过环境变量的方式，来设置不同环境下服务器的地址；