1. 程式人生 > >vue-i18n 的用法

vue-i18n 的用法

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 的用法