如何导入从html导入.json的.js

我不是说英语的公民，我英语不好，但我做得最好。

我正在尝试导入一个从 html 导入 json 的 js 文件

.js

import JSON from '../json/menu.json';

(function () {
  function parseMenu(ul, menu) {
    for (var i=0;i<menu.length;i++) {
      if(menu.sub == null) {
        menu.sort(function(a, b) {
          return a.id > b.id ? -1 : a.id > b.id ? 1 : 0;
        });
      }
      var li=$(ul).append('<li><a href="'+menu[i].link+'">'+menu[i].name+'</a></li>');
      if (menu[i].sub!=null) {
        var subul=$('<ul id="submenu'+menu[i].link+'"></ul>');
        $(li).append(subul);
        parseMenu($(subul), menu[i].sub);
      }
    }
  }
  var menu=$('#menu');
  parseMenu(menu, JSON);
});

.json 形式

[ {
     {
     },
     {
     }
   },
   {
     {
     },
     {
     }
   },
   {
   }
]

我尝试过像

<script type="module" src="../js/left.js"></script>
<script type="module" src="../json/menu.json"></script>

in html

但我收到以下错误 无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“application/json”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。 在 .json 中

我解决了。

第一的。更改了变量的名称。 JSON 到菜单

第二。已删除<script type="module" src="../js/left.mjs"></script>

最后的。改变了import JSON from '../json/menu.json'; to import menus from '../json/menus.json' assert { type: "json" };

我的猜测是你实际上正在尝试使用.js作为这部分的 src：

<script type="module" src="../json/menu.json"></script>

Chrome 目前支持https://github.com/tc39/proposal-import-assertions https://github.com/tc39/proposal-import-assertions。这允许您告诉浏览器您正在导入 json 文件：

import JSON from '../json/menu.json' assert { type: "json" };

顺便说一句你不应该使用JSON作为变量的名称，因为它是内置对象：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON