设置语言环境：未定义 Vue答案

【问题标题】：Set locale: Vue is not defined设置语言环境：未定义 Vue
【发布时间】：2017-01-31 14:42:37
【问题描述】：

在我的 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。我做错了什么？

【问题讨论】：

看起来您根本没有将Vue 导入您App.vue？
Router.start 自动创建一个 Vue 实例。
您的意思是它将Vue 变量注入到组件范围内？你能给我一个文档链接吗？
不，我想我理解错了，对不起。我的意思是，我只在 main.js 中启动一个新的 Vue 实例。上面的代码是我在 App.Vue 中的全部代码（除了一个带有 <router-start></router-start> 的 html 行，但这没有意义）。

标签： instance vue.js vue-component

【解决方案1】：

我的猜测是您在 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（在App.Vue和main.js中）？
是的，当然。我想您正在使用 browserify 或 webpack 来捆绑文件，并且它们都为您拥有的每个文件创建单独的范围。所以main.js中的Vue在App.vue中不可用。
谢谢。但这并不是文件以这种方式导入两次；导致我的应用程序有更多代码？
不，Vue 代码仅包含在您的代码包中一次，但相同的代码可在您的代码中的不同位置（例如 main.js 和 App.js）作为变量使用Vue.
我的荣幸。如果你愿意，你可以看看你捆绑的 JS 文件，在那里你应该只看到一次 vue 代码，但有多个地方需要它。

【解决方案2】：

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

【讨论】：