vue项目中实现多语言 vue-i18n处理动态加载后端数据语言

项目要求多语言最好是可以根据后台配置的显示

首先是安装npm install vue-i18n -S

当然也可以这样：

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

然后需要在main.js中引入文件

1、添加locales文件夹

新建一个locales文件夹，存放所有跟多语言相关的代码。目前包含三个文件：index.js, en.json, zh.json

en.json和zh.json就是我们的语言包，是一个json形式。这里为了对照方便，我们必须保证语言包的内容是一一对应的。然后我们在index.js中完成设置

index.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'

const locales = {
  zh: require('./zh.js'),
  en: require('./en.js'),
}

const i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales,
})


export const setup = lang => {
  if (lang === undefined) {
    lang = window.localStorage.getItem(LOCALE_KEY)
    if (locales[lang] === undefined) {
      lang = DEFAULT_LANG
    }
  }
  window.localStorage.setItem(LOCALE_KEY, lang)

  Object.keys(locales).forEach(lang => {
    document.body.classList.remove(`lang-${lang}`)
  })
  document.body.classList.add(`lang-${lang}`)
  document.body.setAttribute('lang', lang)

  Vue.config.lang = lang
  i18n.locale = lang
}

setup("zh")
window.$i18n = i18n;
export default i18n

en.json和zh.json这两个文件可以只填{ }即可

我们对外提供了一个setup()的方法，给使用者修改当前使用语种的能力。同时，我们在setup里还做了三件事：
将当前语种存到 localStorage中，保存用户的使用习惯；给body添加语种相关的class，因为不同语言可能导致排版出现差异，我们需要适配；将当前语种存到Vue的全局配置中，以便未来可能的使用。

最后我们在main.js中引入这个Index.js即可。但是因为我把i18n挂载到了window上所以引入的顺序需要渲染页面的前面。

//main.js
import Vue from 'vue'

import i18n from '@crm/locales'   //<=======
import App from './app.vue'
import store from './store'
import router from './router'

然后在app.vue的created生命周期中读取后台预先设置的json文件

读取到之后再通过$i18n.mergeLocaleMessage插件的方法将语言环境信息合并到已注册的语言环境信息中

 created() {
      this.test();
    },

    methods: {
      test() {
        $http.fetch("/addons/yun_shop/static/app/locales/test.json").then(
          function(response) {
            console.log(response.data);
            $i18n.mergeLocaleMessage('en', response.data.en)
            $i18n.mergeLocaleMessage('zh', response.data.zh)
          },
          function(response) {
            console.log(response);
          }
        );
      },
}

前端切换的时候可以通过修改$i18n.locale = "en"这样的方式进行切换

vue-i18n 数据渲染的模板语法：

{{ $i18n.t("message.hello") }}

这个是test.json文件的格式：

{
  "en":{
    "message": {
      "hello": "hello world"
    },
    "test": "test"
  },
  "zh":{
    "message": {
      "hello": "こんにちは、世界"
    },
    "test": "测试~"
  }
}

这样就可以通过修改/addons/yun_shop/static/app/locales/test.json 服务器中的这个文件来动态设置语言

参考链接：

https://fullsmilespace.com/?p=836

https://kazupon.github.io/vue-i18n/zh/api/#%E6%96%B9%E6%B3%95

https://blog.csdn.net/DOCALLEN/article/details/78408137?locationNum=2&fps=1

https://segmentfault.com/a/1190000015008808?utm_source=tag-newest#articleHeader2

vue项目中实现多语言 vue-i18n处理动态加载后端数据语言

猜你喜欢