场景
让项目能够适应多国语言根据系统语言环境展示不同语种,以vue项目为例子
步骤
1. i18n安装
bash
npm install --save vue-i18n #默认安装最新版本
npm install --save vue-i18n@8.27.1 #指定版本
2. 语言文件添加
添加一个文件夹 /lang (文件名可以自己随意取)用以放相关配置文件
1.语言对应文件
在lang文件夹下新建 zh.json
, en.json
等json文件以键值对形式存放字段对应的语言文本。
zh.json:
json
{
"homePage": {
"about": "关于"
}
}
en.json:
json
{
"homePage": {
"about": "about"
}
}
新建一个配置文件index.js:
javascript
import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './en.json'
import zh from './zh.json'
const messages = {
en: {
...en,
...enLocale
},
zh: {
...zh,
...zhLocale
}
}
let lang = localStorage.getItem('lang')
let locale = lang === 'en_US' ? 'en' : 'zh'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: locale, // 设置默认语言
messages,
silentTranslationWarn: true
})
Vue.use(Element, {
i18n:(key,val)=>i18n.t(key,val)
})
export default i18n
3. 在入口文件(main.js)和全局组件文件(App.vue)中配置
main.js:
javascript
import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './lang' // 导入
Vue.config.productionTip = false
Vue.use(Element)
new Vue({
render: h => h(App),
i18n // 注册
}).$mount('#app')
App.vue:
每次挂载都获取一下系统语言,以防语言切换后缓存刷新不及时
javascript
mounted() {
let lang = localStorage.getItem('lang')
if (lang == 'en_US') {
this.$i18n.locale = "en"
} else {
this.$i18n.locale = "zh"
this.locale = null
}
}
4. 代码中使用
在代码中展示文本的位置以{``{$t('')}}
的格式替换文本
javascript
<el-menu-item index="3">{{ $t('homePage.about') }}</el-menu-item>