当前位置: 首页 > news >正文

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.lryc.cn/news/362173.html

相关文章:

  • 守护任务用来防止资源冲突
  • fast admin实现多数据库导入数据
  • NLP基础——序列模型(动手学深度学习)
  • 机器学习AI大模型的开源与闭源:哪个更好?
  • 关于大模型多轮问答的两种方式
  • 达梦数据库相关SQL及适配Mysql配置总结
  • Centos7.9实现多台机器ssh免密登录
  • Unity3D DOTS JobSystem物理引擎的使用详解
  • vue3+element-plus 表单校验和循环form表单校验
  • Java集合基础知识点系统性总结篇
  • 智能网联汽车信息安全风险识别与应对策略研究综述
  • python-web应用程序-Django数据库-数据库表设计
  • C#知识|封装典型的SQLServer数据库查询方法。
  • 第一篇 逻辑门(与门、或门、非门、异或门)
  • 车牌号码智能监测识别摄像机
  • Python局部变量:深入探索与实战应用
  • Java面试八股之怎么降低锁竞争
  • 数组的操作方法
  • RK3588 Android13添加开机logo或开机动画
  • JVM学习-监控工具(一)
  • 基础—SQL—DQL(数据查询语言)分页查询
  • 独立开发者通过这100种方式赚钱
  • gitlab服务器迁移(亲测有效)
  • 【刷题(12)】图论
  • FASTGPT:可视化开发、运营和使用的AI原生应用
  • 代码随想录-Day27
  • TalkingData数据统计:洞察数字世界的关键工具
  • printf 一次性写
  • 【Axure高保真原型】切换查看大图列表
  • Ant-Design-Vue动态表头并填充数据