Vue学习之模式和环境变量

开发过程中的不同阶段往往会使用不同的环境，例如测试环境和正式环境，不同环境使用的一些变量往往不同(比如api)，环境切换的时候就需要不同的配置参数，我们可以用环境变量和模式来解决这个问题

1. 环境变量

   • 可以在项目的根目录中放置环境文件来指定环境变量–官方链接

     .env                # 在所有的环境中被载入
     .env.local          # 在所有的环境中被载入，但会被 git 忽略
     .env.[mode]         # 只在指定的模式中被载入
     .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
     

     环境文件是通过vue-cli-service命令载入的，因此环境文件发生变化，需要重启服务；

   • 环境变量的使用

     • 自定义的变量必须以VUE_APP_开头
     • 在代码中使用console.log(process.env.VUE_APP_SECRET)
     • 在html中以HTML插值中介绍的方式使用

2. 模式

   默认情况下，一个 Vue CLI 项目有三个模式：development(开发)、production(生产)、test(测试)

   vue-cli-service serve 命令默认使用development模式

   vue-cli-service build和vue-cli-service test:e2e默认使用production模式

   可以通过--mode选项参数为命令行覆写默认的模式，例如，如果你想要在构建命令中使用开发环境变量：

   vue-cli-service build --mode development

   当运行``vue-cli-service命令时，所有的环境变量都从上述的环境文件中载入，如果文件内部不包含NODE_ENV变量，它的值将取决于模式，例如，在production模式下被设置为"production"，在test模式下被设置为"test"，默认则是"development"，针对不同的NODE_ENV`变量，Vue CLI会创建不同的webpack 配置