我无法使用 i18n 插件部署 nuxt3 项目

Question

我有一个用 Nuxt 3 开发的项目，我构建并部署了它并将其托管在 Netlify 网站上，一切都很顺利。该项目已上线，没有任何错误，一切都很好。

后来我决定用多种语言来开发这个项目。我在项目中安装了i18n插件并调整了所有文件。在我当地的环境中，一切都运行良好。然而，当我部署它并使网站上线时，它停止工作。构建和部署日志没有指出任何错误，但站点显示以下错误：

500 无法读取未定义的属性（读取“源”）

我已经研究和寻找解决方案有一段时间了。我已尝试联系支持人员和 Netlify 论坛，但尚未找到解决方案。

下面，我列出一些代码片段以供验证，看看是否一切正常：

nuxt.config.ts

import i18nConfig from './i18n.config'

export default defineNuxtConfig({
    // Other configurations ...

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

    i18n: i18nConfig,
})

i18n.config.js（位于项目的根目录）

// i18n.config.js
export default {
    locales: [
        {
            name: 'English',
            code: 'en',
            iso: 'en',
            file: 'en.js',
        },
        {
            name: 'Português',
            code: 'pt',
            iso: 'pt',
            file: 'pt.js',
        },
        {
            name: 'Español',
            code: 'es',
            iso: 'es',
            file: 'es.js',
        },
        {
            name: 'Français',
            code: 'fr',
            iso: 'fr',
            file: 'fr.js',
        },
        {
            name: 'Italiano',
            code: 'it',
            iso: 'it',
            file: 'it.js',
        },
        {
            name: 'Deutsch',
            code: 'de',
            iso: 'de',
            file: 'de.js',
        },
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'lang/',
    strategy: 'prefix_except_default',
    // vueI18n: {
    //     fallbackLocale: "en-US",
    //   },
}

“lang”文件夹位于项目根目录，里面有每种语言的file.js，例如en.js：

export default {
    themeColor: 'Theme Mode',
    navbar: {
        home: 'Home',
        about: 'About',
        experiences: 'Experiences',
        academics: 'Academics',
        skills: 'Skills',
    },
    ...

我如何在组件中使用它的示例：

<h1 class="text homeTitle uppercase white d-flex flex-column flex-xl-row justify-content-center align-items-center">
    {{ $t('home.mainText') }}
</h1>

在某些动态组件中，我必须创建一个包含内容的对象，而我设法做到这一点的唯一方法是使用“loc.source”，如下例所示。我将整个组件发送到此处以便更好地理解，并且我相信错误可能出在这些组件中。尽管它在本地工作，但我认为 Netlify 在内部处理一些我无法解释的不同事情。

<template>
    <div>
        <div class="container-fluid">
            <div class="hexagon-cards d-flex justify-content-center align-items-center flex-wrap">
                <div class="col-6 col-md-4 col-lg-3 hexagon-cards-item" v-for="mySkill in mySkills" :key="`mySkill-item-${mySkill.id}`">
                    <SkillsLanguageItem :value="mySkill" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import skill from '@/assets/images/skills/skill'

const { t, tm } = useI18n()

const mySkillsLang = tm('skills.languages')

const mySkills = mySkillsLang.map((skill) => ({
    skillTitle: skill.skillTitle.loc.source,
    skillImage: getCertificateImagePath(skill.skillImage.loc.source),
    skillKnowledge: skill.skillKnowledge.loc.source,
}))

function getCertificateImagePath(name) {
    return skill[name]
}
</script>

我找不到另一种方法来使我需要与“源”一起使用的对象如上所述工作。但是，它在我当地的环境中有效。因此，我尝试在 Netlify 中检查可能的配置，但没有成功。

netlify.toml

[build]
  publish = "dist"

配置.yml

i18n:
    structure: multiple_folders
    locales: [de, en, es, fr, it, pt]
    default_locale: en

请，如果有人知道如何提供任何建议，我将不胜感激，并且如有必要，我可以提供更多详细信息。

Answer 1

我将

i18n.config.ts

作为应用程序根目录中的单独文件，没有来自

nuxt.config.ts

的直接引用。文件结构如下所示：

export default defineI18nConfig(() => ({
  ...
})

而且它可以在盒子外工作。我的应用程序部署在netlify上并且运行顺利。 如果您想更深入地了解，请在此处回购。

---

也许你还应该尝试一下文档中描述的

内容 - 配置应该嵌套在i18n

选项中：

export default defineNuxtConfig({
    // Other configurations ...

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

    i18n: {
        vueI18n: i18nConfig
    },
})

和/或更改您的 i18n 配置文件以提供

export default defineI18nConfig(() => ({ ... })

 而不仅仅是普通的 JS 对象。