Vue 项目中实现多语言国际化 ( i18n ）

前言

现在项目中很多情况下需要实现 国际化，即 多语言。比较常用的就是 中/英 文的切换。
普遍常用的就是 I18N 了，怎么实现呢？莫急，咱们往下瞅！

i18n 使用

第一步：安装

npm install vue-i18n

注意：最新版本测试中有问题，建议大家安装 7.3.2 版本

第二步：在 src 目录下新建一个 lang 文件

一般有三个文件：index.js( 配置 )、zh( 中文 )、en( 英文 )
如果有个更多的语言设置，新增对应的 js 文件即可
注意：所有语言包的内部结构必须一样，方便调用

1. index.js 文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 如果使用了 Element UI 在这里引入对应的语言包
import enLocaleElement from 'element-ui/lib/locale/lang/en'
import zhLocaleElement from 'element-ui/lib/locale/lang/zh-CN'
// 这里是自定义的语言包
import enLocale from './en'
import zhLocale from './zh'

// 引入
Vue.use(VueI18n)

// 引入 对应的语言包
const messages = {
    en: {
        ...enLocale,
        ...enLocaleElement
    },
    zh: {
        ...zhLocale,
        ...zhLocaleElement
    }
}

// new 一个新的 I18n 并返回
export default new VueI18n({
    // set locale options: en or zh
    locale: 'en', // 设置显示 中文
    // set locale messages
    messages
})

2. zh.js

export default {
    index: {
        title: "你好世界",
        subTitle: "这只是一个测试"
    }
}

3. en.js

export default {
    index: {
        title: "hello word",
        subTitle: "this is a test"
    }
}

语言包的内部构造一样，只不过是对应的内容分别为对应的翻译过来的语言

第三步：main.js 里引入 i18n 的配置

import i18n from './lang'
import Element from 'element-ui'
// 如果使用了 Element UI
Vue.use(Element, {
    size: 'medium', // set element-ui default size
    i18n: (key, value) => i18n.t(key, value)
})

// 最最最重要一步，必须把 i8n 放在 vue 实例里
new Vue({
    i18n,
    render: h => h(App),
}).$mount('#app')

第四步：在页面使用

引入 i18n 以后，会全局注册一个变量 $t
平时我们取值都是 {{ name }}
现在我们取值是 {{$t(index.title)}}，index.title 就是在语言里的属性

哇哦，多语言是不是很简单，动起手来，赶紧试试吧！！！