Nuxt3集成i18n插件后Netlify部署报500错误求助

核心原因 #

本地开发时，vue-i18n的调试模式会为翻译后的对象保留loc内部属性，但生产构建（Netlify的静态构建）会开启优化，移除这些内部属性，导致直接访问loc.source抛出Cannot read properties of undefined错误。同时，Netlify自身的i18n配置可能与Nuxt i18n插件产生冲突，加剧静态生成时的资源加载问题。

解决方案 #

1. 移除对loc.source的直接依赖 #

修改组件中处理多语言数据的代码，直接使用tm返回的翻译值，而非内部属性：

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

const { t, tm } = useI18n()

const mySkillsLang = tm('skills.languages')

// 直接使用翻译后的属性值，无需访问loc.source
const mySkills = mySkillsLang.map((skillItem, index) => ({
    skillTitle: skillItem.skillTitle,
    skillImage: getCertificateImagePath(skillItem.skillImage),
    skillKnowledge: skillItem.skillKnowledge,
    id: index // 补充id字段，解决v-for的key缺失问题
}))

function getCertificateImagePath(name) {
    return skill[name] || '' // 增加兜底逻辑，避免图片路径不存在报错
}
</script>

2. 清理Netlify的i18n配置冲突 #

删除config.yml中的i18n配置，Nuxt的@nuxtjs/i18n插件已完成多语言路由和资源管理，Netlify的i18n配置会导致静态生成路径混乱：

# 移除以下所有内容
# i18n:
#     structure: multiple_folders
#     locales: [de, en, es, fr, it, pt]
#     default_locale: en

3. 优化i18n生产构建配置 #

在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',
    // 开启生产环境消息编译优化
    compilation: {
        strictMessage: false,
        escapeHtml: true
    },
    // 确保生产环境消息编译正常
    vueI18n: {
        fallbackLocale: 'en',
        runtimeOnly: false
    }
}

4. 验证Netlify构建命令 #

确认项目package.json的构建脚本正确，同时在Netlify项目设置中配置对应命令：

{
  "scripts": {
    "build": "nuxt build",
    "generate": "nuxt generate"
  }
}

根据部署类型选择：静态站点用npm run generate，SSR站点用npm run build。

额外检查点 #

• 确保lang/目录下所有语言文件的skills.languages结构完全一致，避免某语言缺少字段导致tm返回对象属性为undefined。
• 本地执行npm run generate后，检查.output/public（或dist）目录下的静态文件是否包含所有语言资源，模拟Netlify构建环境排查问题。

内容的提问来源于stack exchange，提问作者Cassio Spessatto