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>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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/155638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

金山云2023年Q3财报:持续向好!

11月21日&#xff0c;金山云公布了2023年第三季度业绩。 财报显示&#xff0c;金山云Q3营收16.3亿元&#xff0c;调整后毛利率达12.1%再创历史新高&#xff0c;调整后毛利额同比上涨57.5%。今年第三季度&#xff0c;公有云实现收入10.2亿元&#xff0c;毛利率达到4.7%&#xf…

反序列化漏洞介绍

反序列化漏洞 序列化和反序列化本身不存在漏洞&#xff0c;之所以会有反序列化漏洞&#xff0c;是因为开发者在编写时&#xff0c;加入了一些恶意的代码 PHP反序列化漏洞是一种安全漏洞&#xff0c;它允许攻击者利用未经验证的用户输入来执行恶意代码。这种漏洞通常出现在PHP…

OpenAI GPT-4 Turbo发布:开创AI新时代

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; IT杂谈 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. GPT-4 Turbo的突破1.1上下文长度和控制手段的加强&#xff1a;1.2多模态支持&#xff1a…

UE必学系列(基础篇完结)

导语&#xff1a; UE必须系列基础篇完结&#xff0c;敬请期待进阶篇 基础篇文章&#xff1a;在掌握了UE4基础操作&#xff0c;并且能上手做一些项目之后&#xff0c;对UE4知识进行更完善的知识体系学习。主要是把学习视频链接汇总&#xff0c;主要学习思路是 优先官方视频和官…

Linux 网络:PMTUD 简介

文章目录 1. 前言2. Path MTU Discovery(PMTUD) 协议2.1 PMTUD 发现最小 MTU 的过程 3. Linux 的 PMTUD 简析3.1 创建 socket 时初始化 PMTUD 模式3.2 数据发送时 PMTUD 相关处理3.2.1 源头主机发送过程中 PMTUD 处理3.2.2 转发过程中 PMTUD 处理 4. PMTUD 观察5. 参考链接 1. …

vue路由传参的详解1.命名路由的传参和取出2.query传参和取出3.meta传参和取出4.其他方式5.注意点 代码和注释

Vue是一款流行的前端框架&#xff0c;其路由功能可以帮助我们实现单页应用&#xff08;SPA&#xff09;的跳转和页面切换。在实际开发中&#xff0c;我们会遇到需要在路由之间传递参数的情况&#xff0c;本篇博客将详细介绍Vue路由传参和取出参数的几种方式。 目录 1. 命名路由…

使用Python实现几种底层技术的数据结构

使用Python实现几种底层技术的数据结构 数据结构(data structure)是带有结构特性的数据元素的集合&#xff0c;它研究的是数据的逻辑结构和数据的物理结构以及它们之间的相互关系&#xff0c;并对这种结构定义相适应的运算&#xff0c;设计出相应的算法&#xff0c;并确保经过这…

千字文||无聊又数了一下千字文字数

千字文的字数去除标点符号真的整整一千个不多的不少 该文章无技术含量&#xff0c;仅三字经原文&#xff0c;学技术的同学可以止步了 千字文&#xff08;原文&#xff09; 【作者】周兴嗣 【朝代】南北朝 天地玄黄&#xff0c;宇宙洪荒。 日月盈昃&#xff0c;辰宿列张。 寒来…

抗混叠在微小目标检测中的重要性

文章目录 摘要1、简介2、相关研究2.1、微小物体检测2.2. 抗锯齿过滤器3、方法3.1. Wavelet Pooling3.2 一致顺序的Wavelet Pooling的WaveCNet3.3、Bottom-Heavy Backbone4、实验4.1、预训练数据集4.2、微小目标检测数据集4.3、抗混叠方法的选择及应用顺序4.4、小波的选择4.5、T…

Python 进程和线程详解(multiprocessing、threading)

文章目录 1 概述1.1 进程 VS 线程1.2 优缺点 2 进程2.1 三个步骤2.2 多进程2.3 带参数2.3.1 元组参数 args2.3.2 字典参数 kwargs 2.4 获取进程编号2.5 设置进程守护 3 线程3.1 三个步骤3.2 多线程3.3 带参数2.3.1 元组参数 args2.3.2 字典参数 kwargs 2.4 获取线程编号2.5 设置…

UE4基础篇十七:分析性能

一、性能瓶颈定位 原文地址:小能猫吃牙膏:UE4 性能 - (一)瓶颈定位 P.S. 对于某个具体问题,我个人偏向于遵循 WHY → WHAT → HOW 的思考方法(重要性逐级递减) 加以理解。因为如果找不到做某件事情的意义(WHY)所在,或是对这件事情本身的定义(WHAT)都模棱两可,那么即便经…

【经验之谈·高频PCB电路设计常见的66个问题】

文章目录 1、如何选择PCB 板材&#xff1f;2、如何避免高频干扰&#xff1f;3、在高速设计中&#xff0c;如何解决信号的完整性问题&#xff1f;4、差分布线方式是如何实现的&#xff1f;5、对于只有一个输出端的时钟信号线&#xff0c;如何实现差分布线&#xff1f;6、接收端差…

特斯拉开启“涨涨涨”模式,一个月宣布涨价4次

KlipC报道&#xff1a;11月21日特斯拉中国官网上调了Model Y长续航全轮驱动版售价&#xff0c;一个月内&#xff0c;特斯拉进行第四次价格调整。 对此特斯拉将近期涨价的原因解释为 这次涨价相对于今年8月份的降价实际上属于‘价格回调’&#xff0c;一方面是因为特斯拉销量好&…

docker部署jdk21的镜像

docker Docker是一种开放源代码软件&#xff0c;可以帮助开发人员更轻松地创建、部署和运行应用程序。它是一种容器化技术&#xff0c;可以将应用程序及其依赖项打包在一个容器中&#xff0c;从而使应用程序更加便携和可移植。Docker将操作系统、应用程序和硬件虚拟化进行了彻底…

LeetCode算法心得——爬楼梯(记忆化搜索)

大家好&#xff0c;我是晴天学长&#xff0c;第二个记忆化搜索练习&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1&#xff09;爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或…

批量插入数据与分页的原理及推导

批量插入数据 【1】准备数据 class Book(models.Model):title models.CharField(max_length32) 【2】一条一条插入 后端 def ab_many(request):# (1)先给Book表插入一万条数据for i in range(1000):models.Book.objects.create(titlef第{i}本书)# (2)将所有数据查询到并展…

Nacos和Eureka的区别

目录 配置&#xff1a; 区别&#xff1a; ephemeral设置为true时 ephemeral设置为false时&#xff08;这里我使用的服务是order-service&#xff09; 1. Nacos与eureka的共同点 都支持服务注册和服务拉取 都支持服务提供者心跳方式做健康检测 2. Nacos与Eu…

手把手带你在AutoDL上部署InternLM-Chat-7B Transformers

手把手带你在AutoDL上部署InternLM-Chat-7B Transformers 调用 项目地址&#xff1a;https://github.com/KMnO4-zx/self_llm.git 如果大家有其他模型想要部署教程&#xff0c;可以来仓库提交issue哦~ 也可以自己提交PR&#xff01; InternLM-Chat-7B Transformers 部署调用 环…

演示命令执行漏洞无回现如何渗透

演示命令执行漏洞无回现如何渗透 在DNSlog 获取一个域名 使用dvwa中的命令执行来ping此域名 执行后在DNSlog收到解析&#xff0c;证明命令执行成功

【理解ARM架构】不同方式点灯 | ARM架构简介 | 常见汇编指令 | C与汇编

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《理解ARM架构》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f3c0;直接操作寄存器点亮LED灯&#x1f3c0;地址空间&#x1f3c0;ARM内部的寄存…