在Astro中导入本地JSON文件的正确方式及菜谱网站数据配置疑问

1. JSON文件的存储位置 #

• 推荐在项目根目录下新建data文件夹，将JSON文件放在这里——Astro对这类数据目录有良好的兼容性，且项目结构更清晰。
• 可以按菜品分类创建子文件夹，比如data/appetizers专门存放前菜的JSON数据，后续维护起来更方便。

2. 执行导入操作的方法 #

Astro支持原生ES模块语法，直接用import即可导入JSON：

• 导入单个菜谱JSON：

  import caesarSalad from '../data/appetizers/caesar-salad.json';
  

• 导入包含多个前菜的数组JSON（比如appetizers.json）：

  import allAppetizers from '../data/appetizers.json';
  

• 如果需要根据路由参数动态加载对应菜谱，使用动态导入函数：

  async function loadRecipe(recipeSlug) {
    const recipeModule = await import(`../data/appetizers/${recipeSlug}.json`);
    return recipeModule.default;
  }
  

3. 导入的位置选择 #

• 动态路由页面（核心渲染场景）：在src/pages/appetizers/[slug].astro这类动态路由页面中导入，配合getStaticPaths预渲染所有菜品页面，实现点击跳转后直接加载对应数据：

  ---
  // src/pages/appetizers/[slug].astro
  import allAppetizers from '../../data/appetizers.json';
  
  export async function getStaticPaths() {
    return allAppetizers.map(recipe => ({
      params: { slug: recipe.slug },
      props: { recipe },
    }));
  }
  
  const { recipe } = Astro.props;
  ---
  <!-- 用JSON数据填充博客文章布局 -->
  <article class="recipe-post">
    <h1>{recipe.title}</h1>
    <p class="recipe-desc">{recipe.description}</p>
    <h3>食材</h3>
    <ul>
      {recipe.ingredients.map(item => <li>{item}</li>)}
    </ul>
    <h3>步骤</h3>
    <ol>
      {recipe.steps.map(step => <li>{step}</li>)}
    </ol>
  </article>
  

• 导航菜单组件：在生成“前菜”菜单的组件（比如src/components/AppetizerMenu.astro）中导入JSON，遍历生成菜品跳转链接：

  ---
  import allAppetizers from '../data/appetizers.json';
  ---
  <nav class="category-menu">
    <h2>前菜</h2>
    <ul>
      {allAppetizers.map(recipe => (
        <li>
          <a href={`/appetizers/${recipe.slug}`}>{recipe.title}</a>
        </li>
      ))}
    </ul>
  </nav>
  

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