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 属性 'config' of undefined

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
  }
})

Answer 2

只需添加一个细节，您必须使用Vue.use(VueI18n)[=11after构造新的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),
});

Answer 3

代码分离的思想可以这样实现

/* i18n.ts */

import VueI18n from "vue-i18n";

import en from "./locales/en.json";

// Export as an arrow function
export default () =>
  new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || "en",
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
    messages: { en }
  });

/* plugins.ts */

import Vue from "vue";

// Plugins
import VueI18n from "vue-i18n";

import i18n from "./i18n";

Vue.use(VueI18n);

export default {
  i18n: i18n()
};

最后，main.ts

/* main.ts */

import Vue from "vue";

import plugins from "./core/plugins";

import App from "./App.vue";

new Vue({
  ...plugins,
  render: (h) => h(App)
}).$mount("#app");

诀窍是在导出 i18n 设置时使用箭头函数。值得一提的是，其他一些Vue插件不会出现这个问题。

Vue-i18n - 无法读取未定义的属性 'config'

Vue-i18n - Cannot read property 'config' of undefined

vue.js

Vue-i18n - 无法读取未定义的 属性 'config'

Vue-i18n - Cannot read property 'config' of undefined

vue.js

vue-i18n

Vue-i18n - 无法读取未定义的属性 'config'