前言
现在项目中很多情况下需要实现 国际化，即 多语言。比较常用的就是 中/英 文的切换。
普遍常用的就是 I18N 了，怎么实现呢？莫急，咱们往下瞅！
i18n 使用
第一步：安装
npm install vue-i18n
注意：最新版本测试中有问题，建议大家安装 7.3.2 版本
第二步：在 src 目录下新建一个 lang 文件
一般有三个文件：index.js( 配置 )、zh( 中文 )、en( 英文 )
如果有个更多的语言设置，新增对应的 js 文件即可
注意：所有语言包的内部结构必须一样，方便调用
- 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
})
- zh.js
export default {
index: {
title: "你好世界",
subTitle: "这只是一个测试"
}
}
- 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 就是在语言里的属性
哇哦，多语言是不是很简单，动起手来，赶紧试试吧！！！
