JavaScript模块导入JSON文件报错，如何正确实现？

针对你遇到的两种报错，这里提供几种可靠的解决方式：

方法一：使用fetch API获取JSON（兼容性最优） #

这是最稳妥的方案，几乎所有支持ES模块的浏览器都能运行，不需要依赖特定的导入语法：

// main.js
async function loadPhoneData() {
  try {
    const res = await fetch('./phoneNumbers.json');
    const phone_numbers = await res.json();
    // 在这里处理你的数据
    console.log(phone_numbers);
  } catch (err) {
    console.error('加载JSON失败:', err);
  }
}
loadPhoneData();

方法二：使用assert { type: "json" }语法（需浏览器支持） #

你之前的写法本身是正确的，但报错可能是因为浏览器版本过低（需要Chrome 91+/Firefox 90+/Edge 91+及以上版本）。确保浏览器版本达标后，使用以下正确语法：

import phone_numbers from "./phoneNumbers.json" assert { type: "json" };

如果仍报错，优先升级浏览器或改用方法一。

方法三：将JSON转为ES模块文件 #

把JSON内容封装成一个JS模块，彻底避开JSON导入的兼容性问题：

1. 创建phoneNumbers.js文件，内容如下：

export default {
  // 原JSON文件中的所有内容直接复制到这里
  "example": "123-456-7890"
};

2. 在main.js中导入这个模块：

import phone_numbers from "./phoneNumbers.js";

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