Vue3实现中英文切换

1、安装插件：cnpm install vue-i18n --save

2、新建language文件夹，新建index.js和en.js和zh.js文件

3、en.js文件内容示例：

export default {
    meg: {
        username: 'username',
        email:'email'
    }
}

zh.js代码示例：

export default {
    meg: {
        username: '姓名',
        email:'邮箱'
    }
}

index.js文件示例：

import { createI18n } from 'vue-i18n'; //引入vue-i18n组件
import zh from './zh';
import en from './en';
//注册i18n实例并引入语言文件
const i18n = createI18n({
    legacy:false,
    locale: 'en', // 语言标识（缓存里面没有就用中文）
    fallbackLocale:'en' , //没有英文的时候默认中文语言
    messages: {
        zh,
        en
    }
});
export default i18n

4、在main.js中引入并使用：

import  i18n  from './components/language/index.js'

createApp(App).use(vant,Button).use(i18n).use(router).use(ElementPlus).mount('#app')

5、在组件中使用，并修改语言：

<template>
    <div class="langpage">
        <h1>中英文切换</h1>
        <button @click="changelang">切换语言</button>
        <div>
          {{$t('meg.username')}}
        </div>
    </div>
</template>

<script setup>
import  {useI18n } from 'vue-i18n';


const i18n = useI18n()
console.log(i18n);

function changelang(){
  i18n.locale.value=='zh'?i18n.locale.value='en':i18n.locale.value='zh'
}

</script>

<style lang="less" scoped>
</style>