vue项目使用.env文件配置全局环境变量

.env文件是node运行时读取的配置文件

首先时NODE_ENV，源自nodeis, NODE_ENV属性一般可以省略不写会有默认值，例如常用的 .env, .env.production，.env.development
这三个文件，如果没有在文件里注明NODE_ENV属性，那就默认就是分别对应:

1. NODE_ENV=production 对应 vue-cli-service buid 命令
2. NODE ENV=development 对应vue-cli-service serve 命令
   以上三个命名不能变动，除此之外，可以另外自定义加上.env.test文件，也就是测试环境，或者.env.beta，也就是内部测试版，等等…

关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件

• .env 全局默认配置文件，不论什么环境都会加载合并(优先加载此文件，再加载下面两个文件，同名变量会覆盖此文件变量)
• .env.development 开发环境下的配置文件, 仅在开发环境加载。
• .env.production 生产环境下的配置文件（也就是正式环境），仅在生产环境加载。
• 以上三个文件命名不能改变，除此之外，可以另外自定义文件，如 .env.idc、.env.name
• vue项目中配置.env文件， 变量命名必须以VUE_APP_开头，比如VUE_APP_URL，VUE_APP_PWD
• 获取.env中的全局变量, 比如, 我在.env文件中设置了变量VUE_APP_BASE_URL = 'https://www.baidu.com', 在项目中我想获取, 只需要使用process.env.VUE_APP_BASE_URL, 就可以取到。
• 配置启动命令
  在vue项目根目录下，找到package.json文件，其中scripts对象是配置的vue启动命令，比如npm run dev，配置如下：

"scripts": {
  "serve": "vue-cli-service serve",
  "serve-test": "vue-cli-service serve --mode test",
  "build": "vue-cli-service build",
  "test": "vue-cli-service build --mode test",
  "all": "vue-cli-service build && vue-cli-service build --mode test"
}

每一行说明如下:

1. npm run serve, 启动项目, 并且加载.env和.env.development文件
2. npm run serve-test, 启动项目, 并且加载.env和.env.test文件
3. npm run build, 生产环境打包, 其中.env和.env.production文件会加载
4. npm run test, 测试环境打包, 其中.env和.env.test文件会加载
5. npm run all, 生产环境和测试环境同时打包, 加载不同的.env文件

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

比如执行npm run serve命令，会先加载.env文件，然后自动加载.env.development文件，同名变量后加载文件会覆盖先加载的文件变量，不同名的直接保留

查看、打印合并后的变量，使用process.env（全局属性，任何地方均可使用）：

console.log(process.env);

webpack提供了配置模式(mode)

通过选择 development，production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production 。

1. 选择 development 打包后，一些没有依赖的方法、变量、文件会保留。
2. 选择 production 打包后，一些没有依赖的方法、变量、文件会被移除。代码会进行压缩，比 development 的文件小。