Vue CLI中使用webpack的多模式和环境变量

在vue项目中我们根据不同的环境去打不同的包， 如测试环境，开发环境， 正式环境 这个时候我们可以使用webpak中的模式和环境变量来操作

可以用于配置各个环境的api地址

环境变量和模式

在vue项目中创建 

.env.development 和  .env.production 文件

.env.production

NODE_ENV=production
VUE_APP_TITLE=My App (production)

.env.development

NODE_ENV=development
VUE_APP_TITLE=My App (development)

配置执行脚本

"serve": "vue-cli-service serve --mode development",

在组件里直接获取变量 打印出来

<script>
export default {
  mounted () {
    console.log(process.env.VUE_APP_TITLE)
  }
}
</script>

运行  npm run serve  

打印 

My App (development)