Vue-i18n - 无法读取未定义的属性“配置”

Question

首先，我向您展示什么有效（在 App.js 中）

 import router from './routes.js';
import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

const app = new Vue({
        el: '#app',
        router,
        i18n
});

但是如果我想把 lang.js 中的代码分开

import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

export default new VueI18n({
   locale: 'en', // set locale
   messages, // set locale messages
});

这样我就可以在 App.js 中编写

import router from './routes.js';
import i18n from './lang.js';

const app = new Vue({
        el: '#app',
        router,
        i18n
});

但不知何故，即使 routes.js 的构建完全相同，这也行不通。

我的 bootstrap.js 看起来像那样，如果知道它很重要的话。

 import Vue from 'vue';

window.Vue = Vue;

import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';

Vue.use(VueRouter);
Vue.use(VueI18n);

对于长代码，我很抱歉，但不知何故错误在于 import i18n from ‘./lang.js’;我收到消息：Uncaught TypeError: Cannot read property ‘config’ of undefined

原文由 Philipp Mochine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在创建应用程序实例的主文件中，将 i18n 添加为选项而不是 Vue.use(Vuei18n) 如下所示：

 new Vue({
  el: '#app',
  i18n,  // < --- HERE
  store,
  router,
  template: '<App/>',
  components: { App }
})

把它放在 el 之后；

这应该是你的语言：

 import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import fr from './fr'
import ro from './ro'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en, fr, ro
  }
})

原文由 V. Sambor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只是为了添加一个细节，你 必须 在使用 Vue.use(VueI18n) 之后 构造新的 VueI18n

 Vue.use(VueI18n);
// must be called after vue.use
const i18n = new VueI18n({
    locale: "en",
    fallbackLocale: "en",
    messages: {
        en
    }
});
new Vue({
    el: "#app",
    i18n,
    render: (h) => h(App),
});

原文由 Ciriak 发布，翻译遵循 CC BY-SA 4.0 许可协议