vue3+vue-i18n实现国际化

1.

        vue项目中安装插件：vue-i18n

        "vue-i18n": "^9.2.2",

2.

        项目src目录下新建一个lang文件夹（存放语言的位置），里面有en.json和zh.json和index.js文件

        

3.

        在lang文件夹下的index.js文件中

import { createI18n } from "vue-i18n";
import EN from "./en.json";
import ZH from "./zh.json";

const messages = {
    zh: {
        ...ZH,
    },
    en: {
        ...EN,
    },
};

const i18n = createI18n({
    locale: "zh", // 设置当前语言类型
    legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
    globalInjection: true, // 全局注册$t方法
    messages,
});

export default i18n;

4.

        在入口文件main.js中：

        

import i18n from "/src/lang/index.js"
let Vue = createApp(App);

Vue.use(i18n)

6.

        在vite.config.js中配置

export default defineConfig({
  resolve: {     
    alias: {
       'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
    }
  }
})

7.

        vscode安装i18n-all插件：为了帮我们写入json文件

        在项目的.vscode中的settings.json文件中进行设置

{
    "i18n-ally.localesPaths": ["src/lang"], //项目中存放语言的为位置
    // 如下须要手动配置
  "i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested：嵌套式  flat:扁平式)
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.enabledParsers": ["json"], // 翻译文件可允许的格式，默认json
  "i18n-ally.sourceLanguage": "zh", // 翻译源语言 (源文件) 根据此语言文件翻译其他语言文件的变量和内容
  "i18n-ally.displayLanguage": "zh", // 显示语言 (显示文件/翻译文件)
  "i18n-ally.translate.engines": ["deepl", "google", "libretranslate", "google-cn"], // 翻译器
  "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
  "i18n-ally.enabledFrameworks": [
    "vue"
  ],
  "commentTranslate.source": "DarkCWK.youdao-youdao",
  "commentTranslate.multiLineMerge": false,
  "commentTranslate.hover.concise": false,
  "commentTranslate.hover.string": true,
  "commentTranslate.hover.variable": true
}

  选中你要写进json的文本，点击灯泡、点击提取文案到i18n

8.

        在页面中使用

vue文件tempalte结构中:
    <div class="headerTitle">
        <p>{{ $t('introduce') }}</p> //写死的，就是'introduce'所以用$t
        <span>{{  t(item.meta.title)  }}</span> //item.meta.title是变量，不是写死的，所以用t
    </div>
    <a-radio-group v-model:value="localeValue">
       <a-radio-button key="en" value="en">English</a-radio-button>
       <a-radio-button key="cn" value="zh">中文</a-radio-button>
    </a-radio-group>

在en.json文件中：
{
  "Tmap": "Tmap",
  "bingZhuangTu": "pie chart",
  "introduce": "This project by vue3 and ant design vue，Contact the author：17679200779(章龙操)",
  "map": "map",
  "sanWei": "three dimensional",
  "shuJuKeShiHua": "Data visualization",
  "zhuZhuangTu": "bar chart"
}

在zh.json文件中：
{
  "Tmap": "天地图",
  "bingZhuangTu": "饼状图",
  "introduce": "此项目由vue3和ant-design-vue搭建，联系作者：17679200779(章龙操)",
  "map": "地图",
  "sanWei": "三维",
  "shuJuKeShiHua": "数据可视化",
  "zhuZhuangTu": "柱状图"
}

vue文件setup中:
import { useI18n } from 'vue-i18n'
let { locale, t } = useI18n()

//国际化初始语言 - 也可以从缓存中拿，知道上次设置的是什么语言，并且刷新页面依然是你设置的语言
let localeValue = localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh'

watch(localeValue, (val) => {
    localStorage.setItem('lang', val) //设置缓存里的lang值
    locale.value = val
})