vue 使用require.context显示文件夹下所有的svg-icon图标

Posted 2023-03-27

参考技术A 近日因开发的项目变得越来越大，导致项目使用的svg-icon越来越多，所以想要制作一个页面来显示目前引入的所有svg-icon，方便查找与使用。
不过在网上搜索了一下，发现并没有人提出或者解决这个问题，因此自己动动手解决了这个问题，在这里把这个解决方法记录一下：

至于如何引入svg-icon并且使用，我就不多费口舌介绍。
有疑问可以参考这个文章： 优雅使用 icon svg 图标

只要在计算属性computed里输出icons数组，通过require.context().keys(); 返回文件夹下所有的icons图标即可：

附：
require.context 接收以下三种参数
directory String -读取文件的路径
useSubdirectories Boolean -是否遍历文件的子目录
regExp RegExp -匹配文件的正则

vue使用require.context,动态变量怎么办

在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自动读取文件夹下的文件进行路由注册。

借鉴思路：
参考vue的功能基础组件的自动化全局注册，看到一个require.context方法，可以读取某个文件夹下的文件信息。因此考虑，使用这个方法，获取views文件夹下的.vue页面，文件夹名称作为路由名称

require.context的使用介绍：

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

页面代码：
如下图示，views文件夹下的内容，都需要进行路由注册。

文件的路径有2种，（1）简单的vue功能页面，直接挂在views文件夹下；（2）复杂的页面，在views下在新建文件夹进行处理。

目前需要自动注册的路由页面，是针对“直接挂在views文件夹”下的页面。（因为views下的二级页面，暂时没有想到好的方案）



router/index.js页面代码
心路历程：

（1）一开始的想法，是想着用数组对象的方式定义好，路由名称和引入的路径地址，但是觉得还是不够自动化，新建.vue文件的时候还是需要手动添加；

（2）后来想到用使用require.context方法得到fileName，然后根据字符串裁减和拼接，得到我所需的url和文件相对路径；

　　例如： component: () =>import(【变量】)，但是后来发现，import()里面，不能使用变量!!!!!!!!!

　　原因：根据es6module语法，由于import是静态执行，所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。
（3）由由于import的使用限制，不能动态使用() =>import的语法，因此在考虑，能否直接替换掉这种异步加载引入的写法。经过分析，得出pathConfig字段里面有一个属性的内容，是指定的vue页面的default模块内容。经测试，可以使用。

　　pathConfig的打印内容如下示：



（4）因此“views”文件夹下的".vue"文件，引入成功，并用变量routerAry存储起来，使用concat方法把其他需要手动注册的路由信息，连接起来，进行路由注册。 参考技术A 您好，非常感谢您的提问。Vue.js的require.context是一个Webpack提供的函数，它可以用来动态变量。它可以帮助我们在编译时自动加载某个目录下的文件，并且可以指定文件的类型，比如.js、.vue等。这样，我们就可以在Vue组件中动态引入某个目录下的文件，从而实现动态变量。 参考技术B Vue使用require.context可以动态加载多个模块，并在运行时更新模块内容。该函数可以接受三个参数：一个目录字符串，一个标志确定是否应该查询子目录，以及一个正则表达式来匹配文件。为了动态加载变量，可以使用`require.context`函数将所有变量存储在一个对象中，并使用for...in循环来动态加载变量。 参考技术C Vue中使用require.context可以实现动态变量的加载，需要在Vue文件中使用JS中的require方法来获取模块的上下文，然后引入动态变量。 参考技术D Vue项目中可以使用webpack提供的require.context()方法动态获取需要加载的文件，并返回一个上下文对象，可以根据路径迭代加载对应的模块。