1.安装
npm ibstall vue-il8n
2.在main.js里配置il8n
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
3.创建il8n实例在main.js中挂载
3-1.实例文件夹:
import VueI18n from 'vue-i18n'
const i18n = new VueI18n({ // 双语
locale: 'zh',
messages: {
'zh': require('./components/lang/zh'),
'en': require('./components/lang/en')
},
})
export default i18n;
3-2.main.js里引用挂载
import i18n from '@/lang'
var vue = new Vue({
el: '#app',
i18n,
})
4.实现切换语言
4-1.vue2
Language(lan){
this.$i18n.locale = lan
localStorage.setItem('lang',lan)
}
4-2.vue3
import { useI18n } from "vue-i18n";
setup(props, context) {
const { locale,t } = useI18n();
const languageChange = (lan) => {
locale.value = lan;
localStorage.setItem("lang", lan);
};
return {
t,
languageChange
};
},
5.显示文字
5-1.vue2使用
html部分
<input type="text" :placeholder="$t('user.loginUsername')" v-model="username" />
js部分
this.$t('user.loginUsername')
5-2.vue3使用
html部分(跟vue2一样)
<input type="text" :placeholder="$t('user.loginUsername')" v-model="username" />
js部分
// 引入il8n配置文件
import i18n from '../../../language/index'
i18n.global.t('user.loginUsername')
网友评论