vue3实现多语言切换

https://blog.csdn.net/weixin_51220466/article/details/123889240
1.npm i vue-i18n 或 cnpm i vue-i18n
2.创建 il18n
在src目录下创建 i18n 文件夹，并在下面分别创建三个语言文件 ：
index.js => 主文件用于导入 i18n 和相关配置
zh.js => 存放中文内容
en.js => 存放英文内容

index.js 示例：
import { createI18n } from 'vue-i18n';
import ZH from './zh.js';
import EN from './en.js';
const messages = {
zh: { ...ZH },
en: { ...EN },
};

const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: 'zh',
messages
});
export default i18n;

locale属性用于设置初始语言，值要和 messages 中的属性 key ，相互对应。

zh.js 示例
export default {
person: {
name:'张三',
hobby:'唱跳，rap，篮球'
},
};

en.js 示例
export default {
person: {
name:'zhangsan',
hobby:'Singing and dancing, rap, basketball'
},
};

3.在main.js 中配置 i18n
import { createApp } from "vue";
import App from "./App.vue";
import i18n from './i18n/index';
const app = createApp(App);
app.use(i18n).mount("#app");

4.使用
4.1如果只是在 html 中使用，不用在导入任何东西
<template>
<div>
<span> {
   
   { $t("person.name") }} </span>
<span> {
   
   { $t("person.hobby") }} </span>
</div>
</template>
4.2在js 中使用，需要通过导入 getCurrentInstance 进行获取
<script setup>
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;
console.log( $t("person.name") ); //获取值
</script>

5.修改语言和获取当前语言
切换语言要导入vue-i18n 的 locale 属性，locale 是ref 对象，要修改value
不要修改 i18n/index.js文件, 导出的对象属性
<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
// 切换中文
function changeZh(){ locale.value = 'zh'; };
// 切换英文
function changeEn(){ locale.value = 'en'; };
</script>

具体代码如下：

1，先下载

1.npm i vue-i18n 或 cnpm i vue-i18n

2，创建lang文件夹

新建三个js文件，用来放不同的翻译

创建一个index.js文件

import { createApp } from 'vue'

import { createI18n } from "vue-i18n";
import elementEnLocale from 'element-plus/lib/locale/lang/en' // 英文语言
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
import elementJaLocale from 'element-plus/lib/locale/lang/ja' // 日文语言

import enLocale from './en'
import zhLocale from './zh'
import jaLocale from './ja'
import Cookies from 'js-cookie'
import App from "../App";


const messages = {
  en_CN: {
    ...enLocale,
    ...elementEnLocale

  },
  zh_CN: {
    ...zhLocale,
    ...elementZhLocale,

  },
  ja_CN: {
    ...jaLocale,
    ...elementJaLocale
  }

}

const i18n = new createI18n({
  legacy: false,
  locale: Cookies.get('language') || 'zh_CN',
  fallbackLocale: 'zh_CN', // 设置回退语言
  // 设置文本内容
  messages,

  silentTranslationWarn: true,
})

export default i18n

3，在main.js中引入

import i18n from "./lang";


app.use(i18n)



app.use(ElementPlus, {
  i18n: (key, value) => i18n.t(key, value),
})

4，实现切换多语言的组件

<template>
  <el-dropdown
    trigger="click"
    class="international"
    @command="handleSetLanguage"
  >
    <div >
      <svg-icon class-name="international-icon" icon-class="language" style="margin-top: 15px;"/>
    </div>
    <!-- 12313212 language: {
   
   { language }} -->
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language === 'zh_CN'" command="zh_CN"
          >
          {
   
   { $t('langSelect.chinese') }}
          </el-dropdown-item
        >
        <el-dropdown-item :disabled="language === 'en_CN'" command="en_CN"
          >
          {
   
   { $t('langSelect.english') }}
          </el-dropdown-item
        >
        <el-dropdown-item :disabled="language==='ja_CN'" command="ja_CN">
          {
   
   { $t('langSelect.japanese') }}
       </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import useLangStore from "@/store/modules/lang";
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;
name: "LangSelect";
const LangStore = useLangStore();
const language = computed(() => {
  return LangStore.language;
});

const { locale } = useI18n();
function handleSetLanguage(lang) {
  locale.value = lang;
  LangStore.setLanguage(lang);

  location.reload()
}
</script>

<style></style>