使用require.contex()自动构建vue 路由, 全局组件-CSDN博客

//自动化部署路由
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
    );
});

转载于:https://www.cnblogs.com/momobig/p/10689167.html