Nuxt部署至Netlify后本地JSON文件无法加载求助

我在Nuxt项目的static目录存放了一个cars.json文件：

{
  "volvo": {
     "brand": "Volvo",
     "model": "v60",
     "price": 36150
   },
  "lexus": {
     "brand": "Lexus",
     "model": "is-250-c",
     "price": 36150
  }
}

在页面pages/cars/_car.vue中导入该JSON并展示数据：

<template>
  <div>
    <h1> {{ carInfo.brand }} </h1>
    <p>Model: {{ carInfo.model }} </p>
    <p>Price: {{ carInfo.price }} </p>
  </div>
</template>

<script>
 const carList = () => import('~/static/cars.json').then(m => m.default || m)

 export default {
   name: 'Car',
   async asyncData({params, redirect}) {
     const cars = await carList()
     if (!cars[params.car]) {
        redirect('/')
     }
     const carInfo = cars[params.car]
     return {
       carInfo,
       carSlug: params.car
     }
   }
 }
</script>

本地环境访问http://localhost:3000/cars/volvo正常，但部署到Netlify后，控制台报错title为undefined，打印carList无输出，推测nuxt generate后JSON文件未被正确导入。

nuxt.config.js配置如下：

export default {
  target: 'static',
  head: {
    title: 'test_app',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  css: [],
  plugins: [],
  components: true,
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module',
  ],
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: '/',
  },
  build: {},
}

解决方案 #

1. 修复JSON文件语法错误 #

你提供的JSON存在两处语法问题：

• volvo对象中"brand": "Volvo"后缺少逗号
• lexus对象中"price": 36150后多了逗号
  这类语法错误在本地开发环境可能被宽松处理，但静态生成时会直接导致JSON解析失败，必须修复。

2. 替换动态导入为静态导入 #

动态import()在静态生成流程中可能无法正确解析static目录下的JSON文件，改为静态导入更稳定可靠：

<script>
// 直接静态导入JSON文件
import cars from '~/static/cars.json'

export default {
  name: 'Car',
  async asyncData({params, redirect}) {
    if (!cars[params.car]) {
       redirect('/')
    }
    const carInfo = cars[params.car]
    return {
      carInfo,
      carSlug: params.car
    }
  }
}
</script>

3. 配置静态生成的动态路由 #

因为项目target设为static，nuxt generate需要明确所有动态路由的参数才能预生成对应页面。在nuxt.config.js中添加路由生成逻辑：

const fs = require('fs')
const path = require('path')

// 读取cars.json生成所有车型路由
const getCarRoutes = () => {
  const carsPath = path.resolve(__dirname, 'static/cars.json')
  const carsData = JSON.parse(fs.readFileSync(carsPath, 'utf-8'))
  return Object.keys(carsData).map(slug => `/cars/${slug}`)
}

export default {
  // ...其他原有配置
  generate: {
    routes: getCarRoutes()
  }
}

配置后nuxt generate会自动为每个车型生成对应的静态页面，部署到Netlify后即可正常加载数据。

4. 检查Netlify部署配置 #

确保Netlify的构建命令为npm run generate，发布目录设为dist——静态目标项目必须通过generate命令生成完整的静态文件，而非build命令。

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