Vue使用VueI18国际化


最近发现好多网站也支持了语言转换,就去了解了一下。

1.首先安装

npm install vue-i18n

2.创建common目录,创建中英文两份文件en.js与zh.js文件

因为需要中英文两份语言,切换的时候需要动态切换语言内容,所以所有文字都不能写死
注意:(变量名字要一样的,切换的时候才能动态的切换)
export const lang = {
  message: '中文'
}
export const lang = {
  message: '英文'
}

3.再创建index.js文件,在index.js里面引入element.ui的中英文文件与vue

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'


这里引入element在main.js里面也就无需再引入了.
并且引入我们的Vuel18
import VueI18n from 'vue-i18n'


实例化我们的i18n插件,并且添加element.ui语言包
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
});
//国际化
const i18n = new VueI18n({
locale: 'en-US', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
messages: {
    //导入国际化语言文件,并且添加Element语音包
    'zh-CN': Object.assign(require('./zh'), zhLocale), // 中文语言包
    'en-US': Object.assign(require('./en'), enLocale) // 英文语言包
}
})
export default i18n


使用起来也是非常的简单。

4.在main.js中引入index.js文件

new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')
html中使用$t('lang.你的变量名')
在js中添加this.$t('lang.你的变量名')即可


如果需要在其他js文件中使用直接
import i18n from '../common/lang/index'
然后i18n.t('lang.你的变量名')即可


切换语言时只需要改变 this.$i18n.locale 就行了
如上是完成了语言国际化

471

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - Vue使用VueI18国际化

评论

乐享管理员
2021-12-11 16:41:44 回复

欢迎大家~

孙瑞杰生日