【前端开发】国际化开发工具i18n的使用教程
场景
让项目能够适应多国语言根据系统语言环境展示不同语种，以vue项目为例子
步骤
1. i18n安装
npm install --save vue-i18n #默认安装最新版本
npm install --save vue-i18n@8.27.1 #指定版本
2. 语言文件添加
添加一个文件夹 /lang （文件名可以自己随意取）用以放相关配置文件
1.语言对应文件
在lang文件夹下新建 zh.json, en.json等json文件以键值对形式存放字段对应的语言文本。
zh.json:
{"homePage": {"about": "关于"}
}
en.json:
{"homePage": {"about": "about"}
}
新建一个配置文件index.js:
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:
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 = falseVue.use(Element)
new Vue({render: h => h(App),i18n // 注册
}).$mount('#app')App.vue:
每次挂载都获取一下系统语言，以防语言切换后缓存刷新不及时
mounted() {let lang = localStorage.getItem('lang')if (lang == 'en_US') {this.$i18n.locale = "en"} else {this.$i18n.locale = "zh"this.locale = null}}
4. 代码中使用
在代码中展示文本的位置以{{$t('')}}的格式替换文本
<el-menu-item index="3">{{ $t('homePage.about') }}</el-menu-item>
参考链接