1.安裝依賴(lài)包：
npm i vue-i18n --save-dev
2.創(chuàng)建中英文對(duì)照js：
assets/i18n/zh.js
module.exports = {
title:"中文",
th:{
title:"標(biāo)題",
user:"賬號(hào)",
pwd:"密碼"
}
}
assets/i18n/en.js
module.exports = {
title:"English",
th:{
title:"Title",
user:"Account",
pwd:"Password"
}
}
3.main.js 引入
import VueI18n from "vue-i18n";
Vue.use(VueI18n)
const i18n = new VueI18n({
locale:'zh', // 語(yǔ)言標(biāo)識(shí)
messages:{
'zh':require("@/assets/i18n/zh.js"),
'en':require("@/assets/i18n/en.js")
}
});
new Vue({
i18n,
render: h=>h(App)
}).$mount("#app")
4.使用
<!-- $t是i18n固定用法 -->
<template>
<div>{{$t('title')}}：{{$t('th.user')}}</div>
<button @click="changeLanguage('zh')">中文</button>
<button @click="changeLanguage('en')">英文</button>
</template>
<script>
export default{
methods:{
changeLanguage(type){
//切換語(yǔ)言
this.$i18n.locale = type
}
},
mounted() {
console.log(this.$i18n.t("title"))
}
}
</script>
以上就是vue-i18n的安裝以及用法
…φ(?????)? 學(xué)習(xí)是我的全部
