之前的写法
'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import Survey from 'page/Survey' import MessageFingure from 'page/MessageFingure' import InterfaceMonitor from 'page/InterfaceMonitor' import PowerDivisioin from 'page/PowerDivisioin' import ApiInfo from 'page/ApiInfo' import UserInfo from 'page/UserInfo' import CodeTable from 'page/CodeTable' import PowerToMe from 'page/PowerToMe' import MessageConfig from 'page/MessageConfig' Vue.component('MessageBroadcast', MessageBroadcast) Vue.component('Survey', Survey) Vue.component('MessageFingure', MessageFingure) Vue.component('InterfaceMonitor', InterfaceMonitor) Vue.component('PowerDivisioin', PowerDivisioin) Vue.component('ApiInfo', ApiInfo) Vue.component('UserInfo', UserInfo) Vue.component('CodeTable', CodeTable) Vue.component('PowerToMe', PowerToMe) Vue.component('MessageConfig', MessageConfig)
今天刚搞明白 如何通过webpack 去动态加载路由
网上有很多方法,但是挺多都不好用,所以我把自己成功实现的 贴出来。
require.context(directory, useSubdirectories = false, regExp = /^.//)
参数说明:
1. 你要引入文件的目录
2.是否要查找该目录下的子级目录
3.匹配要引入的文件
返回:
1. context.require 返回一个require 函数:
function webpackContext(req) {
return __webpack_require__(webpackContextResolve(req));
}
2. 改函数有三个属性:resolve 、keys、id
· resolve: 是一个函数,他返回的是被解析模块的id
· keys: 也是一个函数,他返回的是一个数组,该数组是由所有可能被上下文模块解析的请求对象组成
· id:上下文模块的id
import Vue from 'vue' function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1) } function validateFileName(str) { return /^S+.vue$/.test(str) && str.replace(/^S+/(w+).vue$/, (rs, $1) => capitalizeFirstLetter($1)) } const requireComponent = require.context('./', true, /.vue$/) requireComponent.keys().forEach(filePath => { const componentConfig = requireComponent(filePath) const fileName = validateFileName(filePath) const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName Vue.component(componentName, componentConfig.default || componentConfig) })
实现效果,
成功的动态加载了 Page文件夹下面所有的名为index.vue的组件