以前的寫法 vue
'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 去動態加載路由 webpack
網上有不少方法,可是挺多都很差用,因此我把本身成功實現的 貼出來。web
require.context(directory, useSubdirectories = false, regExp = /^\.\//)api
參數說明:數組
1. 你要引入文件的目錄函數
2.是否要查找該目錄下的子級目錄ui
3.匹配要引入的文件spa
返回:
1. context.require 返回一個require 函數:code
function webpackContext(req) {
return __webpack_require__(webpackContextResolve(req));
}
2. 改函數有三個屬性:resolve 、keys、idregexp
· 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的組件