vuejs3 简单 调用 json 并且在template里面显示数据的问题

问题遇到的现象和发生背景

0基础初步学习vuejs3，目前打算直接在原有的html代码中使用vuejs，尝试外部调用json，然后显示相应数据。

问题相关代码，请勿粘贴截图

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{info.name}}</div>
<script>
    import { someData } from './data.json';
  Vue.createApp({
    data() {
      return {
          info: someData
      }
    }
  }).mount('#app')
</script>
</body>
</html>

JSON


{"name":"John", "age":30, "car":null}
运行结果及报错内容

报错：Uncaught SyntaxError: Cannot use import statement outside a module

我想要达到的结果

能够读取到json，然后将name字段的John显示在template里面


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
 
<body>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="app">
    {{info.name}}
</div>
<script>
  let someData = $.ajax({url:"./data.json",async:false});
  someData = JSON.parse(someData.responseText)
  Vue.createApp({
    data() {
      return {
          info: someData
      }
    }
  }).mount('#app')
</script>
</body>

报错的原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type="text/javascript"，需要改为type="module"

这个花括号去了

img

img

获取到的就是一个数组对象 或者对象

单独的html文件是不能直接导入Json的，因为你的Json文件是在本地的，二楼的代码写的是正确的，但是如果你的html和JSON文件不在服务器中进行运行的话，二楼的代码也会报错，因为ajax的请求是需要服务端响应的。本来看了二楼代码不想再回答了的，突然一想你是单个html文件。

另外，个人建议，初学vue还是使用vue cli创建一个vue的node项目，在项目中学习vue的打开，原因：
第一，使用项目你可以学到更多的vue的用法，webpack的代码，js代码的编译，等等以及一些vue的高级用法。当然这些都可以在单个html文件中实现，但是个人觉得真的很麻烦，这个只是你遇到的第一个问题，后面还有很多。在node项目中，你的这种写法是对的。去掉{}，建议你学习一下import,就明白了

第二，最重要的一点，大家开发前端项目基本上都是cli搭建的node项目，当然也有例外，一些混合开发的项目。

总结：如果你想继续html的话，把json文件和html代码放到tomcat或者nginx服务器中，然后实用二楼的代码，注意url的路径，或者你自己搜索一下fetch，axios请求，另外，学了vue真的没必要再用jquery了,fetch和Axios都不错的。

有用的话希望采纳一下