vue-i18n 的用法

Posted 2021-01-03 haqiao

主要用于网站国际化，开发可以切换多语言的网站

1，安装

npm install vue-i8n

2,在main.js中引入和注册

import VueI18n from ‘vue-i18n‘
import cn from ‘./lang/cn.js‘
import en from ‘./lang/en.js‘

Vue.use(VueI18n)

//实例化
const i18n = new VueI18n({
   locale:‘cn‘,   //默认语言
   message:{   //引用语言包
   cn:cn,
   en:en 
}  
})


const app = new Vue({
    router,
    i18n,  //挂到vue上
    ...App
}).$mount(‘#app‘)

语言包就是单独建一个js文件，用来放一种语言的数据，例如：

//cn.js

export default {
  titile:‘标题‘  
}


//en.js
export default {
  titile:‘title‘  
}

//在页面上使用
<template>
<div>{{$t(‘title‘)}}</div>           //必须用$t(),才能访问到
</template>

切换语言就是改变locale的值就行，在组件中可以用this.$i18n.locale来改变对应的语言