由于您需要访问每个组件中的主机名变量，并在开发模式下将其更改为localhost，或在生产模式下将其更改为生产主机名，因此可以在原型中定义此变量。
像这样：

Vue.prototype.$hostname = 'http://localhost:3000'

并且$hostname将在所有Vue示例中可用：

new Vue({
  beforeCreate: function () {
    console.log(this.$hostname)
  }
})

在我的例子中，为了自动地从开发转换到生产，我已经根据我示例化Vue的文件中的Vue生产提示变量定义了$hostname原型。
像这样：

Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://hostname' : 'http://localhost:3000'

可以在文档中找到一个示例：有关添加示例属性的文档
有关生产提示配置的更多信息，请参见此处：
生产头端的Vue文档

this answer的vue3替换：

// Vue3

const app = Vue.createApp({})
app.config.globalProperties.$hostname = 'http://localhost:3000'

app.component('a-child-component', {
  mounted() {
    console.log(this.$hostname) // 'http://localhost:3000'
  }
})

**警告：**以下答案使用Vue 1.x。twoWay数据突变从Vue 2.x中删除（幸运的是！）.

对于“全局”变量，即附加到全局对象（Web浏览器中的窗口对象）的变量，声明变量的最可靠方法是显式地在全局对象上设置它：

window.hostname = 'foo';

然而，从Vue的层次结构Angular 来看（根视图模型和嵌套组件），数据可以向下传递（如果指定了双向绑定，则可以向上突变）。
例如，如果根视图模型有一个hostname数据，该值可以绑定到一个嵌套的组件，使用v-bind指令作为v-bind:hostname="hostname"或简称为:hostname="hostname"。
在组件内，可以通过组件的props属性访问绑定值。
最终，数据将被代理到this.hostname，如果需要，可以在当前Vue示例中使用。

var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3>',
    props: ['foo', 'bar']
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> \
             <the-grandchild :foo="foo" :bar="bar"></the-grandchild>',
  props: ['foo'],
  data: function() {
    return {
      bar: 'bar'
    };
  },
  components: {
    'the-grandchild': theGrandChild
  }
});


// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo="foo"></the-child>

在需要向上改变父数据的情况下，我们可以在绑定声明中添加.sync修饰符，如:foo.sync="foo"，并指定给定的'props'应该是twoWay绑定数据。
因此，通过改变组件中的数据，父组件的数据将分别被改变。
例如：

var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3> \
             <input v-model="foo" type="text">',
    props: {
      'foo': {
        twoWay: true
      },  
      'bar': {}
    }
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> \
             <the-grandchild :foo.sync="foo" :bar="bar"></the-grandchild>',
  props: {
    'foo': {
      twoWay: true
    }
  },
  data: function() {
    return { bar: 'bar' };
  },  
  components: {
    'the-grandchild': theGrandChild
  }
});

// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo.sync="foo"></the-child>

我强烈建议看看Vuex，它是为Vue中的全局可访问数据而设计的。
如果你只需要几个基本变量，并且这些变量永远不会被修改，我会使用ES6 import：

// config.js
export default {
   hostname: 'myhostname'
}

// .vue file
import config from 'config.js'

console.log(config.hostname)

您还可以以相同的方式导入json文件，该文件可以由没有代码知识的人编辑或导入到SASS中。

对于任何单一文件组件用户，下面是我如何设置全局变量
1.假设你使用的是Vue-Cli的webpack模板
1.在variable.js中声明你的变量

const shallWeUseVuex = false;

1.将其导出到variable.js

module.exports = { shallWeUseVuex : shallWeUseVuex };

1. Require并将其分配到vue文件中

export default {
     data() {
         return {
             shallWeUseVuex: require('../../variable.js')
         };
     }
 }

参考：https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

在vue cli-3中，您可以在main.js中定义变量，如
“http：//localhost：8000/";
您还可以在任何组件中使用window.basurl访问此变量

一种可能性是在index.html中声明变量，因为它确实是全局的。它可以通过添加一个JavaScript方法来返回变量的值，并且它将是只读的。
这个解决方案的一个例子可以在这个答案中找到：https://stackoverflow.com/a/62485644/1178478