vue项目中定义全局变量、全局函数

在vue项目中，我们经常会遇到要在多个页面组件中都要使用的一个变量或者函数，比如说需要配置的ip地址，在生产环境和测试环境不一样就需要修改。因此我们可以定义一个全局变量来接收这个ip地址，每次更换地址的时候只需要修改一次全局变量。

步骤1 创建全局变量模块文件Global.vue

在vue项目中的src/components文件夹中创建一个Global.vue，存放我们的全局变量、全局函数，并且暴露出去。具体代码如下：
Global.vue：

<script>
const serverSrc='www.baidu.com';
  export default
  {
    userSite,//用户地址
  }
</script>

步骤2 使用全局变量

方式1 单个文件使用

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。比如说在test.vue组件中使用，具体的代码如下：

<template>
    <div>{{ userSite }}</div>
</template>
 
<script>
import global_ from '../../components/Global'//引用模块进来
export default {
data () {
    return {
         userSite:global_.userSite,//将全局变量赋值到data里面，也可以直接使用global_.userSite
        }
    }
}
</script>

方式2 挂载到Vue.prototype

在main.js中引入我们创建的Global.vue文件，然后挂载到vue的实例上。整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。具体代码如下：

 import global_ from './components/Global'//引用文件
 Vue.prototype.GLOBAL = global_//挂载到Vue实例上面