1,安装vue-i18n插件,9版本以上vue3用的
npm install vue-i18n --save
或者
npm install vue-i18n@9 --save
2,src目录,新建lang文件夹
en.js
export default {
test: {
login: "login"
}
}
zh.js
export default {
test: {
login: "登录"
}
}
index.js
import Vue from 'vue';
import {createI18n}from 'vue-i18n'
import elementuiEn from "element-plus/es/locale/lang/en";
import elementuiZh from "element-plus/es/locale/lang/zh-CN";
import en from './en'
import zh from './zh'
Vue.use(VueI18n);
const messages = {
en: Object.assign(en, elementuiEn),
zh: { ...zh, ...elementuiZh }
}
localStorage.setItem('locale', 'zh')
const i18n = createI18n({
locale: localStorage.getItem('locale') || "zh",
messages
})
export default i18n;
3,最后在main.js引入
import i18n from './lang/index.js'
createApp(App).use(store).use(router).use(ElementPlus).use(i18n).mount('#app')
4,如果需要切换中文需要修改i18n.global.locale
//切换的时候改变i18n.global.locale的值即可
<div v-if="$i18n.locale!=='zh'" @click="qiehuan('zh')">中文</div>
<div v-if="$i18n.locale=='zh'" @click="qiehuan('en')">english</div>
export default{
setup(){
const qiehuan=(lang)=>{
if(lang=='zh'){
localeStorage.locale=localeStorage.set("locale","zh")
i18n.global.locale=localeStorage.get("locale")
}else{
localeStorage.locale=localeStorage.set("locale","en")
i18n.global.locale=localeStorage.get("locale")
}
}
return {
qiehuan
}
}
}
5,使用
<div>{{$t('test.login')}}</div>
<script>
import {useI18n} from "@/lang/index"
export default{
setup(){
const {t}=useI18n({})
return {
t
}
}
}
</script>