一次性解决方案,企业级脚手架搭建(包含路由、组件、权限、API层、插件、工具函数、打包优化)

131 阅读1分钟

为了提高开发效率、项目架构规范和可维护性,我们可以采取以下方法来设计和组织Vue项目的架构

image.png

image.png

// router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 创建一个空的路由实例
const router = new VueRouter({
  routes: [],
});

// 使用require.context动态引入路由
const routerContext = require.context('./views', true, /\.router\.js$/);
routerContext.keys().forEach((routeFilePath) => {
  const routeModule = routerContext(routeFilePath);
  const routeConfig = routeModule.default || routeModule;
  router.addRoutes(routeConfig);
});

export default router;