i18n插件实现国际化和按需加载翻译(单页面web应用)

参考：vuei18n文档 , 使用vue-i18n进行项目国际化

1.安装插件包

npm i -S vue-i18n

2.项目目录

project-dir
  -dist
  -src
    -components
      -vue-i18n.vue
    -i18n // 设置文件
      -index.js
    -lang // 翻译文件所在的位置
      -app-en.js
      -app-in.js
      -app-cn.js
    -router
      -index.js
    main.js
    App.vue
复制代码
           

3.

i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);

// 1. 创建一个新的 VueI18n 实例
export const i18n = new VueI18n({
  silentTranslationWarn: true
})

// 2. 创建一个 loadedLanguages 数组，它将跟踪我们加载的语言
const loadedLanguages = []

// 3. 创建一个 setI18nLanguage 函数，它将实际更改 vueI18n 实例、axios 以及其它需要本地化的地方。
function setI18nLanguage (lang) {
  i18n.locale = lang
  // axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}
// 4. loadLanguageAsync 是实际用于更改语言的函数。加载新文件是通过import功能完成的，import 功能由 Webpack 慷慨提供，它允许我们动态加载文件，并且因为它使用 promise，我们可以轻松地等待加载完成。
export function loadLanguageAsync (lang) {
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(/* webpackChunkName: "lang-[request]" */ `@/lang/app-${lang}`).then(msgs => {
        console.log(msgs.default)
        i18n.setLocaleMessage(lang, msgs.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
      })
    }
    return Promise.resolve(setI18nLanguage(lang))
  }
  return Promise.resolve(lang)
}
复制代码
           

4.

main.js

import {i18n} from '@/i18n'
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
}
复制代码
           

5.

***.vue

<template>
  <div class="i18n">
      <div class="content">
         {{$t('reg_button_register')}}
      </div>
      <button @click="chooseLanguage('cn')">cn</button>
      <button @click="chooseLanguage('en')">en</button>
      <button @click="chooseLanguage('in')">in</button>

  </div>
</template>
<script>
import { loadLanguageAsync } from "@/i18n";
export default {
  mounted(){
    this.chooseLanguage('cn');
  },
  methods: {
    chooseLanguage(lang) {
      localStorage.setItem("lang", lang);
      loadLanguageAsync(lang);
    }
  }

}
</script>
复制代码
           

VueI18n的参数

locale

指定默认的语言，也就是Laravel会默认先从这个配置指定的语言里找相应的语言，

fallback_locale

如果locale中的值不存在，就从

fallback_locale

里找。比如你

locale

设置为

cn

, 但如果翻译不全面，这时候en 的

fallback_lcoale

对应的语言文件中有，那么此时就会显示英文的文本，而不是为空。

• src/lang目录下的国际化文件，须将key写为字符窜形式，否则警告：

转载于:https://juejin.im/post/5d424f986fb9a06b2c326ea2