Nuxt3整合Faker.js API无法渲染商品数据问题求助

以下是导致页面无数据显示的核心问题及修复方案：

1. 请求路径错误 #

Nuxt3的API路由通过/api/xxx的URL路径访问，而非直接指向服务器文件路径。原代码中useFetch('./server/api/products')的路径写法错误，需改为/api/products。

2. 数据结构不匹配 #

后端API返回的是包含meta和data的对象，商品数组实际在response.data中，但前端直接用products遍历，没有提取正确的数组。

3. Console语法错误 #

原代码中console.log('++++++++++++++++++++++'.products)存在语法错误，点号应改为逗号，否则会阻断代码执行。

4. API路由导出方式不符合Nuxt3规范 #

Nuxt3的server/api文件推荐使用ES模块语法配合defineEventHandler导出，而非CommonJS的module.exports，避免潜在兼容性问题。

修改后的pages/about.vue代码 #

<template>
    <div>
      <h2>About</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet aperiam minima unde nemo harum quam maxime optio quos corrupti. Eum sapiente facere nemo, laborum ullam non cum fuga quas eveniet harum molestiae minus atque vel ratione illo quia, iure commodi dicta porro excepturi quam. Facere, commodi corrupti ipsam neque totam reprehenderit laboriosam laborum veniam est quo, repellat saepe impedit labore?</p>
      <p>api response:</p>
      <div v-for="(product, index) in products" :key="index">
        <h2>{{ product.name }}</h2>
        <p>Price: {{ product.price }}</p>
      </div>
      <ul>
        <li v-for="product in products" :key="product.id">
          <h2>{{ product.name }}</h2>
          <p>Brand: {{ product.brand }}</p>
          <p>Price: {{ product.price }}</p>
          <!-- Additional product details... -->
        </li>
      </ul>
    </div>
  </template>
  
  <style scoped>
    h2 {
      margin-bottom: 20px;
      font-size: 36px;
    }
    p {
      margin: 20px 0;
    }
  </style>
  
  <script setup> 
const { data: response } = await useFetch('/api/products')
// 提取商品数组，兼容响应未返回的情况
const products = response.value?.data || []
console.log('API响应数据:', response.value)
  </script>

修改后的server/api/products.js代码 #

import { fakerDE as faker } from '@faker-js/faker';
faker.seed(984513174);

function generateDiscount() {
  return faker.number.int({min: 10, max: 50})
}

function generateRating() {
  return faker.number.int({min: 1, max: 5})
}

function generateProductDetailURL(productName) {
  const baseUrl = faker.internet.url({protocol: 'https', appendSlash: true});
  const productSlug = faker.helpers.slugify(productName);
  return baseUrl.concat(productSlug);
}

const generateProducts = () => {
  const products = [];
  for (let i = 1; i <= 16; i++) {
    const productName = faker.commerce.productName();
    const product = {
      id: i,
      brand: faker.company.name(),
      originalProductUrl: generateProductDetailURL(productName),
      name: productName,
      category: faker.helpers.arrayElement(['Furniture', 'Desktops', 'Travel', 'Comics']),
      description: faker.commerce.productDescription(),
      price: parseFloat(faker.commerce.price({min: 10, max: 250, precision:0.01, dec: 2})),
      discount: generateDiscount(),
      imageURL: faker.image.urlPicsumPhotos({width: 512, height: 512}),
      rating: generateRating(),
    };
    products.push(product);
  };
  return {
    meta: {
      total: products.length
    },
    data: products
  };
};

// 使用Nuxt3推荐的API路由导出方式
export default defineEventHandler(() => {
  return generateProducts();
});

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