Question

我想使用＆＃34; vue-i18n＆＃34; （https://kazupon.github.io/vue-i18n/en/），包含多个翻译文件。我的应用程序中有几个组件，页面，指令.... 我想为每个组件创建一个文件夹＆＃34; locales＆＃34;用于每种语言的文件＆＃34; json＆＃34; （en.json，fr.json ...）为了尽可能地删除每个翻译，并且对于我的所有应用程序，每种语言都没有一个大文件。

PS：我使用cli

示例：

src
|- components
 |
 |- select
 |- locales
  |- en.json
  |- fr.json
 |
 |- calendar
 |- locales
  |- en.json
  |- fr.json...

在我的main.js中：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';
import router from './router';
import store from './store';

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

我创建了一个名为＆＃34; lang＆＃34; ：

const lang = {
  namespaced: true,
  state: {
    lang: 'fr',
  },
  getters: {
    lang: state => state.lang,
  },
  mutations: {
    setLang(state, lng) {
      state.lang = lng;
    },
  },
  actions: {
    setLang({ commit }, lng) {
      commit('setLang', lng);
    },
  },
};
export default lang;

现在，我想：

自动加载用户的语言（浏览器）。如果它不在我的本地，我加载＆＃34; en.js＆＃34;默认情况下。
当用户浏览组件，页面时...根据本地目录中的文件自动加载语言
我认为通过Vuex集中行动是一个很好的做法（而且我将Vuex用于其他商店）但如果没有必要，我愿意接受其他解决方案。

我尝试使用它（https://kazupon.github.io/vue-i18n/en/lazy-loading.html），但我无法做到。

如果您有解决方案或者您有更好的提案，请提供。

由于

VueJs和vue-i18n多文件

0 个答案: