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

vue项目

json

javascript 复制代码
// 方式一 : 将文件内容完整的引入
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

javascript 复制代码
import '../xxxxx.js';
批量引入
javascript 复制代码
//三级边框
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

javascript 复制代码
//单个
import.meta.glob('./languages/**/*.json', {
    import: 'default',
    eager: true,
  })
javascript 复制代码
//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

javascript 复制代码
//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);
相关推荐
lichong951几秒前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
知识分享小能手11 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js