一、下載依賴 vue-i18n

yarn add vue-i18n

創(chuàng)建存放語(yǔ)言文件的目錄 以及配置文件的配置

我是在src/lang 新建index.ts、cn.ts、en.ts以及test文件夾其中再分別新建cn.ts以及en.ts

/lang/index.ts 用于導(dǎo)出vue-i18n需要的配置對(duì)象

import en from "./en.ts";
import zh from "./cn.ts";const messages = {en,zh,
};
const language = (
// 讀取本地瀏覽器語(yǔ)言環(huán)境中文 zh-CN 英文 eng(navigator.language ? navigator.language : navigator.userLanguage) || "zh"
).toLowerCase();
export default {fallbackLocale: "zh",legacy: false, // composition APIglobalInjection: true, //全局生效$tlocale: language.split("-")[0] || "zh", // 默認(rèn)zh翻譯messages,
};

/src/lang/en.ts 以及同目錄下的cn.ts用于收集模塊的語(yǔ)言文件并統(tǒng)一提供給Index.ts導(dǎo)出

import test from "./test/en";
export default {test,
};

/src/lang/cn.ts 以及同目錄下的en.ts用于收集模塊的語(yǔ)言文件并統(tǒng)一提供給Index.ts導(dǎo)出

import test from "./test/cn";
export default {test,
};

/src/lang/test/cn.ts

export default {h1Title: "這是一個(gè)測(cè)試文本"}

/src/lang/test/en.ts

export default {h1Title: "This is a test text"}

main.ts中需要對(duì)vue-i18n進(jìn)行引入并使用

import { createApp } from "vue";//必須的依賴
import App from "./App.vue";//必須的依賴
iimport i18nOptionsObj from "./lang/index"; // 1導(dǎo)入vue-i18需要的配置對(duì)象
import { createI18n } from "vue-i18n"; // 2 導(dǎo)入創(chuàng)建實(shí)例的鉤子函數(shù)
const app = createApp(App); //必須的依賴const i18n = createI18n(i18nOptionsObj);// 3.根據(jù)配置對(duì)象創(chuàng)建實(shí)例
app.use(i18n);// 4.掛在到Vue身上
app.config.globalProperties.$t = i18n.global.t;// 5.全局掛載$t翻譯方法
app.mount("#app");//必須的步驟

組件中使用

模板使用

<template>
<h1>
{{$t("test.h1Title")}}
中文環(huán)境====>這是一個(gè)測(cè)試文本
英文環(huán)境====>This is a test text
</h1>
</template>

js中使用

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log(t("test.h1Title"))
//中文環(huán)境輸出====>這是一個(gè)測(cè)試文本
//英文環(huán)境輸出====>This is a test text
<script>

混合

<script lang="ts" setup>
import {ref} from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const titleMsg1 = ref(t("test.h1Title")) 
const titleMsg2  = ref("test.h1Title") 
<script>
<template>
{{titleMsg1}}
{{$t(titleMsg2)}}
</template>

語(yǔ)言環(huán)境切換

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
locale.value = 'zh' || 'en'