在开发vue项目过程中，如果路由、组件等过多的话，注册起来是一件很麻烦的事情，这里引入自动化注册会很大程度上减少工作量。
webpack使用 require.context 可以动态引入文件,我们可以借助这个方法实现自动化注册。
一、 require.context
-
require
const func = require('./dir/first.js');我们可以通过这个方法读取一个文件中的内容，这里一定要注意文件的路径要写对，不然会访问不到文件。 -
require.context
在刚才的过程中，webpack 会创建一个require.context，通过正则匹配到可能的文件，全部引入。如果我们想自定义这个正则规则的话，可以自己写一个require.context。
语法：require.context('./dir', true, /\.js$/)；第一个参数表示相对的文件目录，第二个参数表示是否包括子目录中的文件（true，false），第三个参数表示引入的文件匹配的正则表达式。
实例：
const context = require.context('./dir', true, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js", "./sub-dir/second-level.js"]
二、开发实例
- 自动化部署路由
//./router/index.js
//404中转页面
import Transit from '@/page/Transit'
//自动化部署
const requireComponent = require.context('../page', true, /\.vue$/);
const routes = requireComponent.keys().map(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName);
// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
// 全局注册组件
const component = Vue.component(
componentName.replace(/\//,'-'),
// 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根。
componentConfig.default || componentConfig
);
return {
path: '/'+componentName,
name: componentName.replace(/\//,'-'),
component
}
});
//添加404页面
let notFoundPage = {
path: '*',
name: '404',
component: Transit
};
routes.push(notFoundPage);
Vue.use(Router);
export default new Router({
routes
})
- 自动化注册全局组件
//main.js
//自动化注册全局组件
const requireComponent = require.context('./components/global', true, /\.vue$/);
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName);
// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
// 全局注册组件
const component = Vue.component(
componentName.replace(/\//,'-'),
componentConfig.default || componentConfig
);
});
欲望以提升热忱，毅力以磨平高山。
