【Vue高级知识】如何使用Vue CLI-3.0脚手架工具分别配置项目的开发环境和部署环境下的环境变量

1. cli-3.0总共提供了四种方式来制定环境变量：

1. 在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。
2. 在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。
3. 在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。
4. 在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪。

默认的package.json文件内容：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

2. 模式

Vue CLI项目中有三种模式：

1. development：在vue-cli-service serve下，即开发环境使用
2. production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式环境使用
3. test： 在vue-cli-service test:unit下使用

3. 配置开发环境和上线部署环境

开发环境配置流程：

1. 在vue.config.js 的同级别目录下创建一个.env.development/.env.production文件，注意文件名字必须是完全一致的；

NODE_ENV = 'development'
VUE_APP_NAME =  'App'
VUE_HOST_URL = 'http://www.52tech.tech'

 2. 重新启动项目，保证配置的环境变量生效；

3.使用自己定义的环境变量

在项目中的src目录下如果要使用自己定义的环境变量的话，必须以VUE_APP_开头。例如我们可以在main.js中直接输出：

console.log(process.env.VUE_APP_HOST_URL)  // http://www.52tech.tech

这样我们就可以在项目中的任意位置使用自己定义的环境变量。