vue3中使用i18n实现项目中英语切换

1. 安装 `npm i vue-i18n'
2. 创建一个lang文件夹，文件夹中分别创建一个名为en和zh的文件夹，分别存放中英文对照，在里面新建index.ts,内部代码写法如

export default {
    language:'Language',
    user:{
        age:'Age',
        name:'Name',
        }
     
    }

3. 在lang文件夹中新建index.ts

import { createI18n } from "vue-i18n";
import zh from './zh'
import en from './en'


const messages = {
    'zh': zh,
    'en': en
}
 
export const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: localStorage.getItem('lang'),
    messages
})
 
 

4. 然后在main.ts中引入

import {i18n} from './lang/index'
app.use(i18n)

5. 在vue文件中使用方法

<template>中，使用$t('user.name')
<script>中
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
使用t('user.name')

5. 语言切换组件

<template>
    <div class="lang">
        <el-dropdown trigger="hover" @command="handleSetLanguage">
            <div class="text">
                {{$t('language')}}<el-icon ><CaretBottom /></el-icon>
            </div>

            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="zh" :disabled="language === 'zh'">中文</el-dropdown-item>
                    <el-dropdown-item command="en" :disabled="language === 'en'">English</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
   
   
<script setup>
import {
    CaretBottom
} from '@element-plus/icons-vue'
import { computed } from "vue";
 
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

// 实例化i18
const i18 = useI18n();

// 进行语言切换
const handleSetLanguage = (lang) => {
    i18.locale.value = lang;
    localStorage.setItem('lang',lang)
    ElMessage.success("切换成功");
    console.log(lang);
};
</script>
<style scoped>
.lang{
    padding-right: 20px;
    .text{
        display: flex;
        align-items: center;
    }
}
</style>