vue3项目实现国际化实现方式vue-i18n@next和composition-api

方法一：vue-i18n@next

首先安装插件 cnpm install -D vue-i18n@next

目录结构：

zh-cn和zh-hk放相应的文字，index.ts:

//index.ts
import CN from './zh-cn'
import HK from './zh-hk'
export default {
  "cn": CN,
  "hk": HK
} 

//i18n.ts:
import { createI18n } from 'vue-i18n'
import messages from './index'

const i18n = createI18n({
  locale: localStorage.lang || 'hk',
  messages, //message结构为{cn: {proProdType: {child: '婴儿'}}, hk: {proProdType: {child: '嬰兒'}}}
  fallbackLocale: 'cn'
})

export default i18n

在main.ts中去注册

//main.ts
import i18n from './language/i18n'
app.use(i18n)

业务模板中使用：:name="$t(proProdType.child)"

改变语言方法：

import i18n from '../language/i18n'
const changeLang = () => {
  i18n.global.locale = 'cn';
  localStorage.lang = 'cn'
}

方法二：利用composition-api的Provide / Inject

目录结构：同上。修改i18n.ts：

import { ref, provide, inject } from "@vue/composition-api";
const createI18n = (config) => ({
    locale: ref(config.locale),//响应式的数据 locale改变语言随之改变
    messages: config.messages,
    $t(key) {
        return getValueByPath(this.messages[this.locale.value], key);
    }
});

//支持访问a.b.c嵌套的对象结构
function getValueByPath(obj, path) {
    let paths = path.split(".");
    let res = obj;
    let prop = paths.shift();
    while (prop) {
    res = res[prop];
    prop = paths.shift();
    }
    return res;
}

const i18nSymbol = Symbol();
//用于app.vue
export function provideI18n(i18nConfig) {
    const i18n = createI18n(i18nConfig);
    provide(i18nSymbol, i18n);
}

//用于业务代码
export function useI18n() {
    const i18n = inject(i18nSymbol);
    if (!i18n) throw new Error("No i18n provided!!!");
    return i18n;
}

修改app.vue文件，调用provide函数传递参数：

import { provideI18n } from "./language/i18n";
import messages from "./language/index";
setup() {
    provideI18n({
        locale: "cn",
        messages
    });
}

修改业务代码使用i18n：

<template>
    <div>
        <h2>{{ i18n.$t("proProdType.child") }}</h2>
        <button @click="switchLanguage">Switch language</button>
    </div>
</template>
<script>
import { useI18n } from "./i18n";
export default {
    setup() {
        const i18n = useI18n();
        const switchLanguage = () => {
            const locale = i18n.locale.value === "cn" ? "hk" : "cn";
            i18n.locale.value = locale;
        };
        return {
            i18n,
            switchLanguage
        };
    }
};
</script>