Web前端小站Web

Vue使用VueI18国际化

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

4086 热度
1360 浏览

1.首先安装

bash 复制代码 
npm install vue-i18n

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

因为需要中英文两份语言，切换的时候需要动态切换语言内容，所以所有文字都不能写死

注意：（变量名字要一样的，切换的时候才能动态的切换）

javascript 复制代码 
export const lang = {
  message: '中文'
}
export const lang = {
  message: '英文'
}

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

javascript 复制代码 
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

javascript 复制代码 
import VueI18n from 'vue-i18n'

实例化我们的i18n插件，并且添加element.ui语言包

javascript 复制代码 
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文件

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

如果需要在其他js文件中使用直接

javascript 复制代码 
import i18n from '../common/lang/index'
然后i18n.t('lang.你的变量名')即可

切换语言时只需要改变 this.$i18n.locale 就行了

如上是完成了语言国际化

Vue使用VueI18国际化

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

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

评论 (0)

0/50
暂无评论，快来抢沙发吧~