十分钟入门前端最佳的语言国际化方案

首先,我们先来介绍一下，什么是语言国际化。i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让网站无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。简单来说，就是你的网站可以有多种语言。

在项目有语言国际化需求的时候，我们通常会选择相应的库，比如使用Vue框架时，我们会选择vue-i18n,当我们使react时，我们也许会使用react-int等，但在具体实践中，往往只是会用这个库还不行，你还得解决如何同步UI框架的组件语言国际化，以及如何处理从浏览器获取默认语言同步问题。总的来说，要充分考虑到这三个环境的语言问题。

现在我就以在Vue项目下，使用vue-i18n整个框架，并且同步更改UI框架Vuetify的组件语言国际化来作为例子，一步一步实现整个项目的语言国际化。

安装

npm
npm install --save vue-i18n@next
yarn
yarn add vue-i18n@next

1.1 定义好语言模版

安装好这个库之后，我们可以先在src目录下新建一个i18n文件夹，然后在messages文件夹下面定义好语言模版（名称没有硬性要求，后面会说到命名方案），如图所示：

1.2 然后，将Vue-i18n引入到Vue项目中

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

import Store from '@/store'
import messages from './messages/en'  //默认语言 
Vue.use(VueI18n)
new Vue({
   
  router,
  i18n,
  vuetify,
  store,
  render: (h) => h(App)
}).$mount('#app')

这样注入到Vue对象中，我们就可以这样更改语言了，通过

i18n.locale=lang
去更改你需要的语言，就可以自动获取相应的语言了，在模版中使用$t(‘hello’)来翻译。

vue-i18n更多使用姿势看这里：http://kazupon.github.io/vuei18n/introduction.html#sponsors

我就不过多讲解了，我主要说一下与UI框架的同步、异步加载和默认语言处理问题。

这里为了更好的性能，默认只加载一种语言，因为当语言过多时，全部加载存在性能问题，所以采取了异步加载语言模版的方案。

在i18n文件下，新建index.ts入口文件。

异步加载代码如下：

/**
 * @functin setLang - 设置应用语言
 * @param {string} lang - 要设置语言的名称
 * @return {string} lang - 语言名称
 */
function _set(lang: string): string {
   
  i18n.locale = lang
  // i18n.fallbackLocale = lang
  Axios.defaults.headers.common['Accept-Language'] = lang
  Store.__s('app.language', lang)
  return lang
}

/**
 * @functin loadLangAsync - 异步加载语言模版
 * @param {string} lang - 需要加载的语言名称
 * @return {string} lang - 加载好的语言名称
 */
export function