直接就说明白了
vite 中对json 文件直接当作一个模块来解析。
可以直接导入使用！
可以直接导入使用！
可以直接导入使用！
json文件中的key，直接被作为一个属性，可以单独被导入。
因此，导入json文件有两种方式；
方式一 ： 导入全部的json内容；
方式二 ：根据需要，导入部分json内容。
案例
项目结构
study-vite
| -- src
| -- assets
| -- abc.json # json 文件
| -- index.html # 主页面
| -- main.js # 主js文件
| -- package.json # 主要看运行时命令
文件代码
abc.json
{
"name1":"name1value",
"name2":[
{"name2_1":"name2_1value"},
{"name2_2":"name2_2value"}
]
}
main.js
展示两种导入的方式
// 方式一 ： 将文件内容完整的引入
import aaaJson from './src/assets/abc.json'
console.log(aaaJson)
console.log('---')
// 方式二 ： 部分引入-名称必须是文件中定义的key
import {name1,name2} from './src/assets/abc.json'
console.log(name1)
console.log(name2)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
vite 中解析json文件
<br>
<!-- 引入 main.js 模块 -->
<script type="module" src="./main.js" ></script>
</body>
</html>
package.json
"scripts": {
"dev": "vite --mode development",
},
运行效果
# 执行的命令
$ npm run dev
