一.安装vue-i18n 三种方式
1.script引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
2.npm安装
npm i vue-i18n@6 -S
3.yarn 安装
yarn add vue-i18n@6
二.配置
1.添加相关文件
213.png
2.i18n文件夹下的index.js文件
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
// 设置默认语言
locale:localStorage.getItem('locale') || 'zh', //语言标识
// 添加多语言(每一个语言标示对应一个语言文件)
messages:{
zh, //中文
en, //英文
}
})
export default i18n;
3.单个语言页面的配置
// 英文
const en = {
name:'name',
info:{
age:'male'
}
}
export default en;
// 中文
const zh = {
name:'姓名',
info:{
age:'男'
}
}
export default zh;
4.在main.js引入i18n
import i18n from "./i18n";
new Vue({
router,
store,
i18n, //注意：一定要加进去
render: h => h(App),
}).$mount("#app");
三.使用
<div>
<h3>vue国际化</h3>
<p>{{$t("name")}}</p>
<p>{{$t("info.age")}}</p>
</div>
<button @click="changeType('zh')">切换中文</button>
<button @click="changeType('en')">切换英文</button>
// 国际化类型
changeType(type){
//此处做了语言选择记录
localStorage.setItem('locale',type);
//修改显示语言
this.$i18n.locale = type;
},
