vue项目引入json/js文件批量或单个方法

vue项目

json

// 方式一 : 将文件内容完整的引入
import json from './src/assets/xxx.json'
console.log(json)
console.log('---')// 方式二 : 部分引入-名称必须是文件中定义的key
import {name1,name2} from './src/assets/xxx.json'
console.log(name1)
console.log(name2)

js

import '../xxxxx.js';
批量引入
//三级边框
let lnglatJson = loadFrames (require.context('../assets/js/lnglatJson', false, /\.js$/))/*** 批量加载js* @param {Function} context - require.context 创建的函数* @returns {Array<string>} 返回的所有js*/
function loadFrames (context) {const frames = {}context.keys().forEach(k => {if(k.includes('anyang')){frames['xx']=context(k)}else if(k.includes('hebi')){frames['xx']=context(k)}else if(k.includes('xinxiang')){frames['xxx']=context(k)}})return frames
}
export default {lnglatJson}

vite项目

json

//单个
import.meta.glob('./languages/**/*.json', {import: 'default',eager: true,})
//json导入
//批量
(async function(){let jsonFiles =await import.meta.globEager('../../../../public/js/map/json/*.json');console.log(jsonFiles)let jsonData={}for (let filePath in jsonFiles) {const fileData = jsonFiles[filePath].default;jsonData[filePath.replace(/.*\//, '')] = fileData; // 移除路径前缀}console.log(jsonData)
})()
//写在函数中
onMounted(async () => {let jsonFiles =await import.meta.globEager('../../../../public/js/map/json/*.json');console.log(jsonFiles)let jsonData={}for (let filePath in jsonFiles) {const fileData = jsonFiles[filePath].default;jsonData[filePath.replace(/.*\//, '')] = fileData; // 移除路径前缀}console.log(jsonData)
});

js

//js导入
import '../../../../public/js/map/yunnan.js';
//云南导入
const files = import.meta.globEager("../../../../public/js/map/yunnan/*")
let AllPics = Object.values(files).map((v) => v.default);

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

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

相关文章

SRS视频服务器应用研究

1.SRS尝试从源码编译启动 1.1.安装ubuntu 下载镜像文件 使用VMWare安装&#xff0c;过程中出现蓝屏&#xff0c;后将VM的软件版本从15.5升级到17&#xff0c;就正常了。 1.2.更新ubuntu依赖

第二十四章多栏布局解决方案(什么是自适应?/)

什么是自适应? 指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术.简单的来说自适应就是让同一个页面自动适应不同大小的设备&#xff0c;从而解决为不同设备提供不同版本的页面问题。 1&#xff0e;两列自适应 两列自适应布局是指左侧固定宽度&#xff0c;右…

低代码开发与人工智能技术在商品推荐系统中的应用

引言 低代码开发和人工智能技术的背景和重要性 随着数字化转型的深入&#xff0c;企业在信息技术领域面临着前所未有的挑战和机遇。快速变化的市场需求、日益复杂的技术环境以及高度竞争的商业环境&#xff0c;迫使企业不断寻求高效的开发和运营解决方案。低代码开发平台应运而…

Java基础入门day58

day58 EL表达式 概念 EL&#xff1a;expression language EL使得JSP写起来更简单、简介&#xff0c;主要用于获取作用域中的数据 语法 可以使用${}获取指定作用域中的数据 用于替换作用域.getAttribute("name") ${scope.name}获取指定的某个作用域中的数据 ${name}…

【java-数据结构19-队列的模拟实现】

上篇文章&#xff0c;小编已经带大家一起认识了队列&#xff0c;并且对队列的方法进行调用测试&#xff0c;下面我们将模拟实现一个队列&#xff0c;话不多说&#xff0c;上正文~ 1.队列的模拟实现 队列的实现方法和链表的实现方式一模一样&#xff0c;这里我们首选双链表&…

VirtualBox虚拟机与bhyve虚拟机冲突问题解决@FreeBSD

问题 在安装完bhyve虚拟系统的主机上启动VirtualBox虚拟机的时候&#xff0c;报错&#xff1a;不能为虚拟电脑 debian 打开一个新任务. VirtualBox cant operate in VMX root mode. Please close all other virtualization programs. (VERR_VMX_IN_VMX_ROOT_MODE). 返回 代码…

UWP与WPF:微软两大UI框架

在微软的开发者生态系统中&#xff0c;UWP(Universal Windows Platform)与WPF(Windows Presentation Foundation)是构建Windows应用的两大明星框架。它们各自携带独特的设计理念和技术特性&#xff0c;服务于不同的开发需求和应用场景。本文将深入探讨这两者之间的异同&#xf…

项目成功的关键要素:进度管理

在项目管理中&#xff0c;进度管理是决定项目成败的关键因素之一。它关乎项目能否在预定的时间范围内高效、准确地完成既定目标。 一、进度管理的重要性 1、时间控制&#xff1a;项目的成功往往与时间的把握息息相关。进度管理能够确保项目在既定的时间框架内有序进行&#x…

uni-app学习完结

昨天空余一天&#xff0c;并未写记录&#xff0c;是昨天属于项目完结&#xff0c;这里把最后的打包上线等这里说下。 打包成微信小程序 打包成微信小程序&#xff0c;这需要再微信公众平台里面&#xff0c;进行登陆和设置。这里说下&#xff0c;注册的后&#xff0c;选择需要…

LeetCode---链表

203. 移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 代码示例1&#xff1a;(直接使用原来的链表来进行移除节点操作) //时间复杂度: O(n) //空间复杂度: O(1) class Solu…

算法训练营36

题目1&#xff1a; 根据通过情况反复挑战最终AC过了&#xff0c;这里和原来的差别是他的排序是用绝对值排序的&#xff0c;这样的思路会很简单 class Solution { public:int largestSumAfterKNegations(vector<int>& nums, int k) {sort(nums.begin(), nums.end())…

数据通信基本概念汇总

1. 数据通信基础 网关: 提供协议转换&#xff0c;路由选择&#xff0c;数据交换的网络设备 报文: 网络中所传递的一个数据单元。 数据载荷: 最终要传递的信息 封装: 给数据载荷添加头部和尾部的过程(形成新的报文) 解封装: 给数据载荷去掉头部和尾部的过程(获取数据载荷) 终端设…

C语言中的位段

位段是通过结构体实现的&#xff0c;可以在一定程度上减小空间浪费&#xff0c;位段的声明和结构体类似&#xff0c;有以下几个不同&#xff1a; ①位段的成员必须是整形&#xff08;int,char,short等&#xff09;。 ②成员后边有冒号和数字&#xff0c;表示该成员占几个bit位…

LeetCode---栈与队列

232. 用栈实现队列 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元素int pee…

深入理解Java面向对象设计的六大原则

目录 单一职责原则&#xff08;SRP&#xff09; 开放封闭原则&#xff08;OCP&#xff09; 里氏替换原则&#xff08;LSP&#xff09; 依赖倒置原则&#xff08;DIP&#xff09; 接口隔离原则&#xff08;ISP&#xff09; 迪米特法则&#xff08;LoD&#xff09; 结语 …

Mac快速搭建前端环境创建前端项目【Vue】

Mac快速搭建前端环境&创建前端项目 官网&#xff1a; vue&#xff1a;https://cn.vuejs.org/vue-router&#xff1a;https://www.axios-http.cn/pinia&#xff1a;https://pinia.vuejs.org/zh/getting-started.htmlaxios&#xff1a;https://www.axios-http.cn/ant-design&…

Advanced Installer 问题集锦

1、界面在主题中显示的图标&#xff0c;如logo、发布者名称、产品名称就算在设计界面时删除&#xff0c;但是下次打开工程依然存在 解决办法&#xff1a;“可见”属性设置为禁用 2、在不关闭软件的情况下&#xff0c;使用"文件->打开"来切换项目&#xff0c;再次…

c++按索引同时删除多个元素

文章目录 代码结果 这个时候不能从前往后删&#xff0c;因为会破坏後面的元素的索引值&#xff0c;比如如果第删除了第2个元素&#xff0c;第3个元素的索引就会变为第2个元素的索引&#xff0c;造成混乱&#xff0c;甚至引起程序崩溃。应该从後往前删。 代码 #include<iost…

学习笔记——数据通信基础——数据通信网络(基本概念)

数据通信网络基本概念 网络通信&#xff1a;是指终端设备之间通过计算机网络进行的通信。 数据通信网络(Data Communication Network)&#xff1a;由 路由器、交换机、防火墙、无线控制器、无线接入点&#xff0c;以及个人电脑、网络打印机&#xff0c;服务器等设备构成的通信…

软考 系统架构设计师系列知识点之杂项集萃(21)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;20&#xff09; 第30题 软件结构化设计包括&#xff08; &#xff09;等任务。 A. 架构设计、数据设计、过程设计、原型设计 B. 架构设计、过程设计、程序设计、原型设计 C. 数据设计、过程设…