在vue項目中需要用到多語言，然后百度了一些前輩的文章，都是推薦用i18n。所以我也在這里寫一寫我自己的總結。
安裝
npm install vue-i18n
使用
/* 在main.js 里面引用 */
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
初始化 ?
同樣是在main.js里面加入
const ?i18n ?= new VueI18n({
????locale: 'zh', ? ? ? ? //設置默認語言
????messages: {
????????'zh': require('@/common/lang/zh.js'),
????????'en': require('@/common/lang/en.js')
????}
})
創建JS文件
我個人是在我項目的根目錄下的common/lang下創建了兩個js文件，中文 zh ?英文 en
zh.js 的代碼如下
module.exports = {
? ? message: {
? ? ? ? ?demo: '這是一個例子'
? ? }
}
en.js 的代碼如下
module.exports = {? ?
? ? ?message: {
? ?????????? ?demo: 'demo'
? ? }
}
完成這些步驟就可以在頁面里面引用了
<div>
? ? {{ $t('message.demo')}}
</div>
也可以在屬性里面引用
<div>
? ? <input ?:placeholder=" $t(' message.demo')" ?/>
</div>
切換語言
html部分
? ? <button @click="changeLang" id="zh">中文</button>
? ???<button @click="changeLang" id="en">英文</button>
JS部分
? ? methods: {
? ?? ???? changeLang （e）｛
? ? ? ? ? ? ? ?this.$i18n.locale = e.target.id
? ? ????｝
? ? ?}
這樣就實現了多語言的切換啦
附帶上我項目里多語言的截圖
