使用require.contex()自动构建vue 路由, 全局组件
//自动化部署路由 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 ); });