vue项目开发技巧(require.context)

require.context主要是利用require.context实现前端工程动态。他导入文件require.context(directory,useSubdirectories=false,regExp=/^.//)第一个参数是目标文件夹是否寻找子集true|false正则匹配比如：require.context('./router',true,/\.routes\.js/可以理解为获取router文件下以.routes.js结尾的文件，知道了这个之后就可以动态导入文件到项目中，使用vue全局注册组件比较方便，在项目中，我们会根据项目的功能，将项目中经常出现的部分写成组件，方便调用，这时候可以使用require.context完成组件注册，无需在每个页面导入例如我们把所有组件写在components文件夹下，然后创建componentRegister.js，使用require.context注册组件functionchangStr(str){返回str.charAt(0).toUpperCase()+str.slice(1)}exportdefault{install(Vue){constrequireAll=require.context("./components",false,/\.vue$/)requireAll.keys().forEach((item)=>{Vue.component(changStr(item.replace(/\.\//,'').replace(/\.vue$/,'')),requireAll(item).default)})}}然后在main.js这个js文件中导入这个就行了，然后vue.use()注册就可以在所有页面调用该组件了。比如在components下创建HelloWorld.vue组件，页面中只需要即可使用vue路由。同样的道理，它也可以解决另一个问题。在vue项目中，路由文件会随着项目的增长越来越大。我们可以为此使用require.context进行模块化管理，首页定义主路由，router.jsimportVuefrom"vue";importVueRouterfrom"vue-router";Vue.use(VueRouter);constrouterList=[];functionimportAll(r){r.keys().forEach((key)=>{routerList.push(r(key).default);});}importAll(require.context("../routes",true,/\.routes\.js/));//这里的目录和规则可以根据自己的习惯使用，这里是routes下以.routes.js结尾的文件constroutes=[...routerList,];constrouter=newVueRouter({routes,});导出默认路由器；这样就可以通过routes下的模块来管理路由了。不管添加什么，只需要在routes下新建一个即可。