vue-i18n 的用法
阿新 • • 發佈:2018-08-31
tle npm emp 註冊 oca 單獨 mount 標題 js文件
主要用於網站國際化,開發可以切換多語言的網站
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來改變對應的語言
vue-i18n 的用法