构建 Nuxt 应用时，会有国际化的需求，这时，我们可以借助 i18n 这个 module。

安装

pnpm:

pnpm install -D @nuxtjs/i18n

yarn:

yarn add --dev @nuxtjs/i18n

npm:

npm install @nuxtjs/i18n --save-dev

在 nuxt.config.ts 中，添加 module：

modules: [
    '@nuxtjs/i18n',
],

配置

在 nuxt.config.ts 中，编辑配置信息：

i18n: {
    vueI18n: "~/i18n/i18n.config.ts",
},

对应地，在 i18n/i18n.config.ts 中，有如下配置：

export default defineI18nConfig(() => ({
    legacy: false,
    locale: "en",
}));

为了能够根据浏览器语言自动配置，寒寒添加了如下文件，位于 initI18n.ts:

// 自行配置的语言代码
const supportLanguages = ["zh-CN", "en", "ja"];
function setLang() {
    const { locale } = useI18n();
    const lang = navigator.language;
    for (const l of supportLanguages) {
        if (lang.toLowerCase().includes(l.toLowerCase())) {
            locale.value = l;
            document.documentElement.setAttribute('lang', navigator.language);
            return;
        }
    }
    locale.value = "en";
    document.documentElement.setAttribute('lang', 'en-US');
}

export const getLang = () =>{
    const lang = navigator.language;
    for (const l of supportLanguages) {
        if (lang.toLowerCase().includes(l.toLowerCase())) {
            return l;
        }
    }
    return "en";
}

export default setLang;

而在 app.vue 的 <script setup> 中，则需要相对应地调用 setLang 初始化：

import setLang, { getLang } from './i18n/initI18n';

// ...

// Initilize i18n
setLang();

使用

为了组件看起来和谐写起来方便，寒寒选择了在组件内添加翻译文本信息的方法。

首先，在一个 SFC 的setup部分，声明一个翻译函数t：

const { t } = useI18n({
    useScope: 'local'
});

再添加一个块用于保存翻译字符串，使用yaml格式编写，其中的语言代码和之前配置保持一致。

<i18n lang="yaml">
zh-CN:
    add: "添加"
en:
    add: "Add"
ja:
    add: "追加"
</i18n>

在模板中，使用双大括号包裹，调用t获取对应地本地化字符串即可：

<template>
    <!-- ... -->
        <span class="mr-1">{{ t('add') }}</span>
    <!-- ... -->
</template>