Vue.js项目导入JSON文件报错：模块未提供指定导出项

问题原因 #

JSON模块在ES模块规范中默认导出整个文件的内容对象，你用{ allFlights }这种命名导入方式，相当于查找模块中名为allFlights的导出项，但JSON文件根本没有这个命名导出，所以触发报错。

解决方法 #

方法1：直接导入整个JSON对象 #

修改导入语句，去掉解构语法：

<template>
  <FlightsList :flights="flights"/>
</template>

<script>
import allFlights from '../modules/api/drafts/flights.json'

export default {
  data () {
    return {
      flights: allFlights
    }
  }
}
</script>

方法2：如果JSON内包含allFlights字段 #

如果你的flights.json结构是嵌套了allFlights字段（比如{"allFlights": [...]}），先导入整个JSON对象，再提取对应字段：

<template>
  <FlightsList :flights="flights"/>
</template>

<script>
import flightData from '../modules/api/drafts/flights.json'

export default {
  data () {
    return {
      flights: flightData.allFlights
    }
  }
}
</script>

验证JSON结构 #

确保你的flights.json语法正确，且结构符合预期，示例结构：

{
  "allFlights": [
    { "id": 1, "number": "CA123" },
    { "id": 2, "number": "MU456" }
  ]
}

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