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

直接就说明白了

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>Documenttitle>
head>
<body>
    vite 中解析json文件
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>

package.json

  "scripts": {
    "dev": "vite --mode development",
  },

运行效果

# 执行的命令
$ npm run dev

Vite - 静态资源处理 - json文件导入_第1张图片

你可能感兴趣的:(Vite,json,vite,静态资源导入)