首页 > 其他分享 >vue3 获取asset文件夹下所有资源文件列表

vue3 获取asset文件夹下所有资源文件列表

时间:2023-04-28 17:15:40浏览次数:52  
标签:files const name item 文件夹 asset key vue3 path

 参考链接:https://www.jianshu.com/p/0f4386d19c07

import path from "path";   const getLayerBgs = function () {   const imgs: any = [];   // 获取所有背景图层   //读取文件的路径 是否遍历文件的子目录 匹配文件正则表达式   const files = require.context("@/assets/layer", false, /\.(png|jpg|jpeg)$/);   //files(key).default拿到该模块的vue对象   files.keys().forEach((key) => {     const name = path.basename(key);     const item = {};     item["imageUrl"] = "@/assets/layer/" + name;     item["imageName"] = name;     imgs.push(item);   }); }; 如果报错参考以下链接:

参考链接:https://blog.csdn.net/qq_54089372/article/details/127652316

 

标签:files,const,name,item,文件夹,asset,key,vue3,path
From: https://www.cnblogs.com/gaosj20210301/p/17362663.html

相关文章

  • vue3 + ts + vite 封装 request
    npmiaxios目录 request.ts (直接复制可用)importaxiosfrom"axios";import{showMessage}from"./status";//引入状态码文件import{ElMessage}from"element-plus";//引入el提示框,这个项目里用什么组件库这里引什么//设置接口超时时间axios.defa......
  • vue3自定义指令实现el-select下拉加载更多
    1.新建js文件exportdefault(app)=>{app.directive('loadmore',{beforeMount(el,binding){constelement=el.querySelector('.t-select__dropdown');element.addEventListener('scroll',()=>{co......
  • paramiko遍历嵌套文件夹上传到linux服务器,并执行sh脚本
    场景:由于工作原因,开发打包后都要上传包到对应linux服务器,并执行对应shell脚本,替换包内配置文件,启动服务。换包频率过于频繁,因此需要实现一种不用打开xshell、xftp的方法,直接将包放在本地文件,双击exe运行所有操作,以节省时间,想到使用python的paramiko、pyinstaller模块实现。功......
  • Vue2.0版本升级到vue3.0
    vue版本的升级主要步骤:一、首先需要卸载你之前的vue2.0版本输入cmd–>回车–>进入dos界面输入命令查询vue的版本:vue-Vorvue-Version输入命令卸载目前vue版本:npmuninstall-gvue-cli再输入vue版本查询命令,提示“不是可执行的命令”则表示卸载成功了。二、安装新......
  • Vue3+typescript如何给元素添加一个Ctrl+s的事件,用于保存文件?
    如下代码,建议用这个,e.keyCode已经过时,后面都是用e.key:string.onMounted(()=>{window.addEventListener('keydown',(e)=>{if(e.ctrlKey&&e.key==='s'){//检查是否按下了Ctrl+Se.preventDefault();//阻止默认行为(保存网页)con......
  • 【前端可视化】大屏scale适配vue3 hooks
    useScalePage.jsimport{onMounted,onUnmounted}from'vue';import_from'lodash';/**大屏适配的hooks*/exportdefaultfunctionuseScalePage(option){constresizeFunc=_.throttle(function(){triggerScale();//动画缩放网页}......
  • 关于为element Tree组件实现仿文件夹效果及右键菜单
    <template><divclass="custom-tree-container"@contextmenu.native="handlePaste($event)"><!--<el-tree:data="dataSource"show-checkboxnode-key="id"default-expand-all:expand-on-click-n......
  • Vue3实现组件级基类的几种方法
    Vue3的组件有三种代码组织方式纯OptionAPI(不含setup)optionAPI+setup纯setup(即compositionAPI)对于这三种形式,设置基类的方法也略有不同。使用mixins、extendsvue3提供了mixins和extends,但是尝试之后发现这两种方法只支持纯OptionAPI,设置的data会被识别,但是设置的......
  • Vue3路由正确写法
    import{createRouter,createWebHistory}from'vue-router'importHomefrom'@/view/Home.vue';importLoginfrom'@/view/Login.vue'constroutes=[{path:'/',component:Home},{path:'/login',......
  • vue3 ts 项目文件夹解析
    vue3ts项目文件夹解析layouts文件夹通常用于存放应用程序中的布局组件或布局相关的文件。布局组件是用于包装应用程序中的页面内容的组件,通常包含头部导航、侧边栏、页脚、页面标题等等。布局组件可以在不同的页面中共享,并且可以为应用程序带来一致的外观和体验。core存放......