1.安装依赖包：
npm i vue-i18n --save-dev
2.创建中英文对照js：
assets/i18n/zh.js
module.exports = {
title:"中文",
th:{
title:"标题",
user:"账号",
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', // 语言标识
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){
//切换语言
this.$i18n.locale = type
}
},
mounted() {
console.log(this.$i18n.t("title"))
}
}
</script>
以上就是vue-i18n的安装以及用法
…φ(๑˃∀˂๑)♪ 学习是我的全部
