设置语言环境：Vue 未定义

Question

在我的 main.js 文件中，我注册了 Vue：

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import VueI18n from 'vue-i18n';

import App from './components/App.vue';

// Register plugins
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(VueI18n);

// Create router
const router = new VueRouter({
  history: true,
  saveScrollPosition: true,
});

router.start({
  components: { App },
}, 'body');

现在我想在我的 App.Vue 中获取翻译文件:

<script>
export default {
  ready() {
    /* Set Language */
    Vue.locale('nl', function setLanguage() {
      return this.$http({
        url: '/src/language/nl_NL.js',
        method: 'get',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      })
      .then((response) => {
        Vue.locale('nl', response);
        Vue.config.lang = 'nl';
      }).then(() => {
        alert('Error');
      });
    });
  },

};
</script>

我收到错误：'Vue' is not defined。我做错了什么？

Answer 1

据我从您的代码中了解到，您的 Vue 应用程序是在您让 Vue 使用所有依赖项之前创建的。只有在完成所有这些 Vue.use(*) 之后，您才应该创建应用程序实例。它应该这样做。另外，最好在组件内部使用 this 来引用 Vue 的正确实例。在您的方法中，您可以 self = this 保护自己免受范围问题的影响。在子组件中，您可以使用 this.$root 来引用应用程序组件。希望对您有所帮助。

Answer 2

我的猜测是您在 App.vue 中缺少 vue 的导入语句，因为 vue 不会自动将其自身注入 vue 文件 AFAIK：

<script>
import Vue from 'vue'; // <--

export default {
  ready() {
    /* Set Language */
    Vue.locale('nl', function setLanguage() {
      return this.$http({
        url: '/src/language/nl_NL.js',
        method: 'get',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      })
      .then((response) => {
        Vue.locale('nl', response);
        Vue.config.lang = 'nl';
      }).then(() => {
        alert('Error');
      });
    });
  },

};
</script>

设置语言环境：Vue 未定义

Set locale: Vue is not defined

instance

vue.js

vue-component