在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实例上面