vue3语言切换相关，i18n的配置和使用

安装依赖

yarn add vue-i18n@next
yarn add vue-i18n@9.2.2
# or
npm install vue-i18n@next

目录配置

注

语言翻译文档文件可以放在大多数位置，此处放在language文件夹下。

当然也可以在对应模块的文件夹下新建一个文件夹如language-data，在里面存放翻译文档。只要注意页面中引入翻译文档时，路径正确即可。

如下

各目录下代码

【src/language/index.js】

import { createI18n } from "vue-i18n";

/**
 * 在此处配置i18n语言类型项，此处配置对应语言后，需在语言文档里添加对应信息
 * 如配置一个新语言JP，在此处配置后，需在/language/common/demo.js等语言文档下新增一个JP:{...}项
 */
const languageTypes = [
    { key: "CN", name: "简体中文", alias: "简体" },
    // { key: "HK", name: "繁體中文", alias: "繁體" },
    { key: "EN", name: "English", alias: "English" },
];

// 创建 i18n 配置
const setupI18n = (app) => {
    let i18nOptions = {
        locale: languageTypes[0].key, // 本地化语言
        fallbackLocale: languageTypes[1].key, // 备选语言
        legacy: false, //是否启用传统模式，默认true启用，需要在Composition API中使用则设为false
        // globalInjection: true,  //全局注入，页面内调用全局i18n需要用$t('xxx')，而非t('xxx')
        silentFallbackWarn: true,
    };
    app.use(createI18n(i18nOptions));
};

export {
    languageTypes,
    setupI18n,
};

【main.js】

import { createApp } from "vue";
import App from "./App.vue";
import { setupI18n } from "@/language/index";

const app = createApp(App); //创建vue实例

async function setupApp() {
    /* i18n语言切换 */
    setupI18n(app);
    
    app.mount("#app");
}

setupApp();

【src/utils/language/toggleLanguage.js】

import { languageTypes } from "@/language/index";

/**
 * 接收两个参数
 * @param {*} locale
 * vue-i18n 9.x版本locale信息需要使用useI18n获取
 * 但useI18n函数规定不可在setup之外调用，故需要先在setup中，获取useI18n().locale，再传到这里
 * @param {*} value 需要设置成哪种语言，CN-中文，EN-英文等，语言类型在language/index.js下配置languageTypes
 */
const toggleLanguage = (locale, value) => {
    if (value) {
        locale.value = value;
        localStorage.setItem("languageType", locale.value);
    } else {
        // 自动化判断语言类型并做切换
        for (let i in languageTypes) {
            if (locale.value == languageTypes[i].key) {
                //判断当前语言类型

                let nexti = Number.parseInt(i) + 1;
                nexti = nexti >= languageTypes.length ? 0 : nexti; //判断为最后一个语言类型，则从头开始

                locale.value = languageTypes[nexti].key; //切换到下一个语言类型

                localStorage.setItem("languageType", locale.value);
                return;
            }
        }
    }
};

export default toggleLanguage;

【src/utils/language/index.js】

import toggleLanguage from "./toggleLanguage";

export default {
    toggleLanguage
}

【src/utils/index.js】

import languageUtil from "./language";

export { 
    languageUtil 
};

【src/language/common/demo.js】

module.exports = {
    messages: {
        CN: {
            userLogin: "用户登录{uname}",
            loginAccount: "账号密码登录",
            loginPhone: "手机短信登录",
        },

        HK: {
            userLogin: "用戶登錄{uname}",
            loginAccount: "賬號密碼登錄",
            loginPhone: "手機短信登錄",
        },

        EN: {
            userLogin: "Sign In{uname}",
            loginAccount: "By User Name",
            loginPhone: "By Phone Number",
        },
    },
};

【src/views/language-demo.vue】

<template>
    <div class="home tlc">
        <!-- 常规用法 -->
        <div>{{ t("loginAccount") }}</div>
        <!-- 具名插值 -->
        <div>{{ t("userLogin", { uname: "嘻哈" }) }}</div>
        <!-- 使用全局属性，用$t -->
        <div>{{ $t("globalText") }}</div>
        <!-- 切换语言 -->
        <button @click="setLanguage">切换</button>
    </div>
</template>

<script>
import { useI18n } from "vue-i18n"; //【使用i18n--step1】
import { languageUtil } from "@/utils/index"; //【语言切换--step1】

export default {
    setup() {
        const {t} =useI18n(require("@/language/common/demo"))  //【使用i18n--step2（获取common/demo文件下的语言数据）】
        const { locale } = useI18n(); //【语言切换--step2（这里不需要require指定文件。而是需要获取全局的locale，否则不能全局生效）】
        function setLanguage() {
            languageUtil.toggleLanguage(locale, ""); //【语言切换--step3】
            // languageUtil.toggleLanguage(locale, "EN"); //【语言切换--step3--指定切换的语言类型】
        }

        return {
            t, //【使用i18n--step3】
            setLanguage,
        };
    },
};
</script>

<style scoped lang="less"></style>

解决报错

报错

解决

报错
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

解决
chainWebpack: (config) => {
    config.resolve.alias.set("vue-i18n", "vue-i18n/dist/vue-i18n.cjs.js");  // 解决基于vue3引入vue-i18n的报错
},