Vite - 静态资源处理 - json文件导入

直接就说明白了

vite 中对json 文件直接当作一个模块来解析。
可以直接导入使用！
可以直接导入使用！
可以直接导入使用！

json文件中的key，直接被作为一个属性，可以单独被导入。
因此，导入json文件有两种方式；
方式一 ： 导入全部的json内容；
方式二 ：根据需要，导入部分json内容。
1
2
3
4
5
6
7
8
9

案例

项目结构

study-vite
	| -- src
		| -- assets
			| -- abc.json # json 文件
	| -- index.html       # 主页面
	| -- main.js          # 主js文件
	| -- package.json     # 主要看运行时命令
	
1
2
3
4
5
6
7
8

文件代码

abc.json

{
    "name1":"name1value",
    "name2":[
        {"name2_1":"name2_1value"},
        {"name2_2":"name2_2value"}
    ]
}
1
2
3
4
5
6
7

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)
1
2
3
4
5
6
7
8
9

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    vite 中解析json文件
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package.json

  "scripts": {
    "dev": "vite --mode development",
  },
1
2
3

运行效果

# 执行的命令
$ npm run dev
1
2

在这里插入图片描述

相关阅读:
AI项目五：结印动作识别
nesp实验八路由器RIP协议路由实验
基于Linux的Spark安装与环境配置
【Nginx33】Nginx学习：重写更改请求模块
Matlab写入nc文件遇到‘Start+count exceeds dimension bound (NC_EEDGE)‘问题的解决办法
Store Limit 使用文档
java计算机毕业设计小型健身俱乐部网站源码+系统+数据库+lw文档+mybatis+运行部署
【软件工程导论】软件工程导论笔记
[474]. 一和零
hashmap1.7和1.8的数据结构的区别（下次复习我就不用再到网上搜了）

原文地址：https://blog.csdn.net/qq_39505245/article/details/134495144