在nuxt.js项目中有时候我们需要添加一些全局变量来使用，例如通过一个全局变量配置后台服务地址，这样在所有页面中都可以用到这个后台服务地址了，下面介绍一下在nuxt.js项目中如何添加和使用全局变量。

1 首先新建一个目录config，里面新建一个文件config.vue，内容如下

<script>
const serverurl="http://8.8.8.8:8888/warName";
export default {
    serverurl
}
</script>

这里的serverurl就是一个全局变量，用来配置项目的后台服务地址。

2 然后在plugins目录下建立一个文件main.js，内容如下

import Vue from 'vue' // vue 文件引入 - 方便在vue方法内容直接 this 调取
import Globe from '../config/config.vue' // 自定变量内容 其他自便

let main = {
    install(Vue) {
        Vue.prototype.$globe = Globe; // 变量的内容 后期可以在vue中 this->$globe.xxx 使用
    }
};

Vue.use(main); // 这里不能丢

// 这里是 为了在 asyncData 方法中使用
export default ({ app }, inject) => {
    // Set the function directly on the context.app object
    app.$globe = Globe // 名称
}

3 在nuxt.config.js中配置plugins/main.js，配置如下

module.exports = {
   // ... 其他配置
    plugins: [
       {src: '~/plugins/main', ssr: true}
    ],
  // ... 其他配置
}

4 使用全局变量

经过上面的配置以后我们就可以在nuxt.js项目的任何一个页面中使用我们定义好的全局变量了，使用示例如下：

  for (var i = 0; i < this.midimgs[index].imgs.length; i++) {
    var imgurl =
      this.$globe.serverurl + "/articleimgs/" + this.midimgs[index].imgs[i]; //云服务器
    filelist.push({
      name: this.midimgs[index].imgs[i],
      url: imgurl,
    });
  }

就是说在任何一个页面我们都可以通过this.$globe.serverurl的形式来使用我们定义的全局变量serverurl。