导入products.json至main.js时遇两个MIME类型错误，求解决方案

问题拆解 #

你碰到的两个错误对应不同的问题根源：

• text/css类型错误：服务器请求./api/products.json时，返回了错误的MIME类型（被识别为CSS），大概率是路径配置错误或服务器对JSON文件的类型映射出错。
• application/json类型错误：ES模块规范默认不允许直接导入JSON文件，浏览器会因JSON的MIME类型不符合JS模块要求而拦截。

分步解决 #

1. 修复text/css MIME错误 #

• 核对文件路径：确认products.json确实在项目的api目录下，文件名（包括大小写、后缀）完全匹配，没有拼写错误。
• 检查服务器配置：如果用本地服务器（如Live Server、Nginx），确保服务器对.json文件的MIME类型配置为application/json，而非text/css。多数本地服务器默认配置正确，若自定义过配置，需修正对应规则。

2. 解决JSON导入的ES模块限制 #

ES模块不能直接导入JSON，推荐两种实用方案：

方案一：用fetch API异步获取数据

放弃直接import，改用异步请求加载JSON，兼容性好且无需额外配置：

// main.js
async function loadProducts() {
  const res = await fetch('./api/products.json');
  const products = await res.json();
  console.log(products);
}
loadProducts();

方案二：通过构建工具配置支持（适用于Vite、Webpack等项目）

如果项目依赖构建工具，可在package.json中添加配置开启JSON模块支持：

// package.json
{
  "type": "module",
  "resolveJsonModule": true
}

配置完成后，就能使用你原本的import语句：

import products from "./api/products.json";
console.log(products);

注意：该方案仅适用于有构建工具的项目，直接用浏览器打开HTML文件不生效。

基础检查 #

确认HTML中的script标签已正确设置type="module"：

<script type="module" src="main.js"></script>

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