Vue多语言支持
Posted jyughynj
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue多语言支持相关的知识,希望对你有一定的参考价值。
i18n插件实现多语言支持,本文以中英文为例记录一下配置过程。
1.配置
1.1安装:npm install vue-i18n --save
1.2创建中英文配置项文件
src/lang目录下创建以下文件:
en.js // 配置英文显示的内容
1 export default 2 ‘home‘: 3 ‘route‘: ‘Tour Route‘, 4 ‘report‘: ‘Issue Report‘ 5 6
zh.js // 配置中文显示的内容
1 export default 2 ‘home‘: 3 ‘route‘: ‘游览路线‘, 4 ‘report‘: ‘问题上报‘ 5 6
1.3配置i18n
i18n.js //这里面配置i18n插件
引入Vue, vue-i18n,导入中英文内容文件zh.js 和en.js
(项目使用了iview组件,所以有iview相关的文件引入)
1 import Vue from ‘vue‘ 2 import I18n from ‘vue-i18n‘ 3 import zh from ‘./zh‘ 4 import en from ‘./en‘ 5 import iviewEn from ‘iview/dist/locale/en-US‘ 6 import iviewZh from ‘iview/dist/locale/zh-CN‘ 7 8 Vue.use(I18n) 9 const messages = 10 en: Object.assign(en, iviewEn), 11 zh: Object.assign(zh, iviewZh) 12 13 14 function getLocal () 15 let lang = ‘en‘ 16 if (Vue.env && Vue.env.language) 17 lang = Vue.env.language 18 19 return lang 20 21 22 const i18n = new I18n( 23 locale: getLocal(), 24 messages 25 ) 26 27 export default i18n
main.js中导入i18n,放入Vue的实例中,这样所有组件都可以使用了。
( 项目使用了iview组件,所以有如下配置
13 Vue.use(iView,
14 i18n: (key, value) => i18n.t(key, value)
15 )
)
1 import Vue from ‘vue‘ 2 import App from ‘./App‘ 3 import router from ‘./router‘ 4 import ‘./assets/iconfont/iconfont.css‘ 5 import iView from ‘iview‘ 6 import ‘./assets/css/mapbox-gl-v0.54.0.css‘ 7 import ‘./assets/iview-styles/iview.css‘ 8 import axios from ‘axios‘ 9 import i18n from ‘./lang/i18n‘ 10 11 Vue.config.productionTip = false 12 13 Vue.use(iView, 14 i18n: (key, value) => i18n.t(key, value) 15 ) 16 17 new Vue( 18 el: ‘#app‘, 19 router, 20 i18n, 21 components: App, 22 template: ‘<App/>‘ 23 )
2.使用:
html中直接使用 $t("home.report") 即可获取zh.js或en.js中home对象的report属性
1 <i-col span="11" > 2 <Button size="large" type="text" custom-icon="iconfont icon-shangbaowenti" @click="report"> 3 $t("home.report") 4 </Button> 5 </i-col>
js中通过Vue实例的$t获取
1 mounted () 2 console.info(this.$t("home.report")) 3
切换语言时只需要改变$i18n.locale的值即可。
1 switchLanguage () 2 this.$i18n.locale = ‘zh‘ // ‘en‘ 3
使用vue-i18n插件做语言切换比较方便,记录一下,欢迎留言交流~
以上是关于Vue多语言支持的主要内容,如果未能解决你的问题,请参考以下文章