方法一：通过<script >标签引入

第一步：在json文件中定义一个变量指向json数据（一些IDE会报错，不过不用管，另外一些IDE规则验证无法通过，导致无法保存，这种情况就用第二种方法吧）。

var jsonData = {
	// json数据
};

第二步：在HTML文件中使用<script>标签引入json文件

<script type="text/javascript" src="./xxx.json"></script>
<script>
// 控制台输出json
console.log("json文件数据", jsonData);
</script>

方法二：通过异步获取json（getJSON）

1. 要引入JQuery
2. 要启动服务（我用的http-server），否则出现跨域报错
3. 注意json文件不能像方法一那样写了，是纯json文件，不要赋值变量了

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.getJSON('data.json', function (data) {
    console.log("json文件数据", data);
})
</script>