1.使用vue-i18n實作語言切換,需要安裝vue-i18n,使用cookie記錄使用者選擇的語言,需要安裝cookie
npm install vue-i18n
npm install js-cookie
2.建立lang檔案,然後在該檔案夾建立lang.js,封裝setLang()和getLang()方法,用來把使用者選擇的語言存取到cookie
export default {
setLang (lang) {
window.localStorage.setItem('user_lang', lang)
},
getLang (defaultLang) {
let localLang = window.localStorage.getItem('user_lang')
if (localLang === null) {
return defaultLang
} else {
return localLang
}
}
}
3.在lang檔案加建立zh.js和en.js語言包
module.exports = {
layout: {
home: '首頁',
scan: '掃一掃',
person: '個人'
}
}
module.exports = {
layout: {
home: 'home',
scan: 'scan',
person: 'person'
}
}
4.在main.js引入vue-i18n和lang.js
import VueI18n from 'vue-i18n'
import LangStorage from './lang/lang'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: LangStorage.getLang('zh'),//調用lang.js的getLang()方法擷取語言
// locale: 'zh',
messages: {
'zh': require('./lang/zh'),//引入語言包
'en': require('./lang/en'),//引入語言包
}
})
new Vue({
el: '#app',
i18n,//使用i18n
components: { App },
template: '<App/>'
})
5.在頁面使用
<mt-header :title="$t('layout.home')" >
<span>{{$t('layout.home')}}</span>
<select slot="left" v-model='lang' class="lang">//語言切換
<option value="zh">中文</option>
<option value="en" >English</option>
</select>
</mt-header>
<!--在js使用-->
<script>
alert(this.$t('layout.home'))
</script>
6.wacth方法監聽語言切換
watch: {
lang (val, olfval) {
this.$i18n.locale = val//切換語言
LangStorage.setLang(this.$i18n.locale)//把語言存到cookie
}
},
7.參考:https://www.jianshu.com/p/b022535713c3,https://www.cnblogs.com/listen9436/p/10525532.html