简单的给你的网站实现国际化操作

安装

npm install vue-i18n@9

基本使用

在src目录下创建lang目录

在此目录下创建对应语言的ts文件，如：

zh.ts

en.ts

kor.ts 韩文

jp.ts 日文

zh.ts示例

export default {
  "首页": "首页",
  "新闻": "新闻",
  "产品": "产品",
  index: "首页"
};

en.ts

// en.js
export default {
    "首页": "Index",
    "新闻": "News",
    "产品": "Product",
    index: "Index"
}

然后新建一个index.ts在lang目录下

import {createI18n } from 'vue-i18n'
import zh from "@/lang/zh";
import en from "@/lang/en";
import jp from "@/lang/jp";
import kor from "@/lang/kor";

const i18n = createI18n({
    locale: "zh", // 默认是中文
    legacy: false, // 解决报错的
    messages: {
        "zh": zh,
        "en": en,
        "jp": jp,
        "kor": kor,
    }
})

export default i18n

然后在main.ts中进行注册

import {createApp} from 'vue'
import App from './App.vue'
import i18n from "@/lang/index"

const app = createApp(App)
app.use(i18n)
app.mount('#app')

在vue的模板中使用

<template>
  <main>
    <span>{{ $t("首页") }}</span>
    <span>{{ $t("新闻") }}</span>
    <span>{{ $t("产品") }}</span>
  </main>
</template>

如果$t警告的话，就在env.d.ts里面加上

/// <reference types="vite/client" />

declare function $t()

在ts文件中使用

import {useI18n} from 'vue-i18n'
const {t} = useI18n();
console.log(t('index'))

切换语言

<template>

  <header>
    <button @click="setLang('zh')">中文</button>
    <button @click="setLang('en')">英文</button>
    <button @click="setLang('kor')">韩文</button>
    <button @click="setLang('jp')">日文</button>
  </header>
  <main>
    <span>{{ $t("首页") }}</span>
    <span>{{ $t("新闻") }}</span>
    <span>{{ $t("产品") }}</span>
  </main>
</template>

<script setup lang="ts">
import {useI18n} from 'vue-i18n'

const {locale, t} = useI18n();

function setLang(lang: string) {
  locale.value = lang; // 切换语言
}

</script>

翻译数据从后端来

准备两个接口

一个是展示有哪些语言的

一个是有对应语言的字典文件

export function langList(): Promise<string[]> {
    return useAxios.get("/api/langs")
}

export function langDetail(lang: string): Promise<object> {
    return useAxios.get("/api/langs/detail", {params: {lang}})
}

mock

import {mock} from "mockjs";


mock(/api\/langs\/detail/, function (options) {
    if (options.url.includes("zh")) {
        return {
            "首页": "首页",
            "新闻": "新闻",
            "产品": "产品",
            index: "首页"
        }
    }
    if (options.url.includes("en")) {
        return {
            "首页": "Index",
            "新闻": "News",
            "产品": "Product",
            index: "Index"
        }
    }
    if (options.url.includes("jp")) {
        return {
            "首页": "トップページ",
            "新闻": "ニュース",
            "产品": "製品",
        }
    }
    if (options.url.includes("kor")) {
        return {
            "首页": "첫 페이지",
            "新闻": "뉴스",
            "产品": "제품",
        }
    }
})

mock(/api\/langs/, ["zh", "en", "jp", "kor"])

页面语言切换

<template>

  <header>
    <button @click="setLang(item)" v-for="item in langs">{{ item }}</button>
  </header>
  <main>
    <span>{{ $t("首页") }}</span>
    <span>{{ $t("新闻") }}</span>
    <span>{{ $t("产品") }}</span>
  </main>
</template>

<script setup lang="ts">
import {useI18n} from 'vue-i18n'
import {langList, langDetail} from "@/api";
import {ref} from "vue";

const {locale, t, messages} = useI18n();

const langs = ref([])

async function getData() {
  langs.value = await langList()
}

getData()

async function setLang(lang: string) {
  messages.value[lang] = await langDetail(lang)

  console.log(messages.value)
  locale.value = lang; // 切换语言

}

</script>

参考文档

官网： https://vue-i18n.intlify.dev/guide/essentials/datetime.html

Not available in legacy mode： https://blog.csdn.net/LQS5858/article/details/128343837

在ts中使用： https://www.jianshu.com/p/fffe291d7d3e

配置i18n国际化：https://blog.csdn.net/qq_43331318/article/details/125363838