Vue-cli3.0之全局变量的使用方法

下面我们来探讨一下Vue-cli3.0中定义全局变量，开发者模式下，调试模式下的全局变量的使用方法以及需要注意的事项！

定义全局变量

首先 我们需要在项目的根目录下创建.env;注意是是在根目录下；

VUE_APP_URL=http://dev.api.com
VUE_APP_STRING=哈哈
VUE_APP_NUMBER=123

我相信大家发现规律了，需要以VUE_APP_开头哦,不然系统是无法识别的；

然后再data里面过度一下，当然也可以不过度，都是允许的！

   data(){
      return {
        url:process.env.VUE_APP_URL,
        string:process.env.VUE_APP_STRING,
        number:process.env.VUE_APP_NUMBER
      }
    }

控制台输出，让它显示在页面上；
注意：改变一次全局变量后。就需要重新npm run serve启动一次，否则无法生效！！
这样我们就能在页面上看到我们的全局变量了；

然后我们试着可以定义方法来控制全部变量的改变；

//  template
点击加1
//  script
  methods:{
    add(){
      this.number ++
    }

然后我们是这个改变“哈哈”用样+1de 方法，我们会发现是NaN，这说明系统是自动判断类型；

开发环境：创建.env.development文件，同时配置.env.development和.env同时存在，系统默认访问,env.development

成品环境：创建.env.production文件；配置好了.env.production后使用build，系统会默认读取.env.production里面的全局变量

如果觉得不错请点点手指，关注下我们公众号"前端伪大叔"，我们会长期为您分享前端知识点；