前言技术：Vue3+Vite+TS+Pinia+Ant-Design-Vue代码规范：Eslint+Prettier依赖管理：Pnpm介绍：后台管理系统会针对不同的权限有不同的权限users，需要针对不同的用户展示不同的内容。项目采用动态添加路由的方式。路由分为静态路由和动态路由两种。静态路由是在任意菜单权限下都可以查看的接口路由。动态路由是根据菜单权限动态生成的路由集合。所有路由权限统一由后端接口输出。此外，您还可以控制页面中元素的权限。后台设计方案时，自定义了5种分类权限类型（1-列表、2-列表搜索框、3-按钮（界面）、4-字段）加密、5-嵌套页面）。技能点总结Svg的使用，往往以组件的形式使用。vite需要使用vite-plugin-svg-icons插件，在vite.config.ts的插件中全局导入svg文件。项目使用了自己的svg和antDesign组件图标混合。//vite全局导入svgviteSvgIcons({//指定需要缓存的图标文件夹iconDirs:[resolve(root,'src/assets/icons')],//指定symbolId格式symbolId:'icon-[dir]-[name]',//CompresssvgoOptions:true})//简单通用的svg组件引入外部svgIcon，导入路径在vite-config.ts中设置为src/assets/icons，使用时只需要加上文件名即可，如下：在main.ts中引入所有antDesign组件图标，命名为ant+原组件名，注意组件名后面有3，首字母大写和camelcase，使用如下：环境配置vite配置多个环境，分别配置多个环境的变量。环境变量env可以通过vite-plugin-environment插件透传。dev开发环境env.test测试环境env.prod生产环境importEnvironmentPluginfrom'vite-plugin-environment'plugins:[EnvironmentPlugin(['']),//插件透传环境变量]鉴权组件返回给后端(1-列表，2-列表搜索框，3-按钮（界面），4-字段加密）使用不同的key进行鉴权处理，页面中的按钮和搜索项用鉴权组件包裹起来，在初始渲染时渲染处理时的页面。动态路由在登录管理后台获取接口返回的权限数据，然后对数据进行解析组装，使用router.addRoute添加路由，使用pinia进行管理。有2个问题需要注意：页面刷新后动态路由会丢失，所以页面刷新需要在main.ts中重新添加路由。为了防止重复添加，需要设置一个flag来进行判断。在登录页面，对路由数据进行分析，交给pinia管理，pinia对路由数据进行数据持久化（pinia的持久化使用pinia-plugin-persist插件）进行处理。添加标志状态是否已添加路由。根据tag状态，在main.ts中获取pinia中的路由，重新添加。//做单store持久化过程persist:{enabled:true,strategies:[{key:'mainStore'}]}，在解析接口数据时，router中组件的解析需要用到import.metavite.glob引入文件，否则生产和构建包会报路由错误。import.meta.glob的解释可以去vite官网。注意导入路径层级需要匹配//获取待导入文件的相对路径constmodules=import.meta.glob('./views/**/*.vue')//使用modules查找需要导入的文件router.addRoute({name:'home',path:'/home',component:modules[`./views/${文件夹名}/${文件名}.vue`]})TroubleshootingDeploymentissues：Vite在打印生产包时，配置基本路径有问题。如果production放在根路径下，base不需要配置（直接去掉配置），否则访问production包时资源路径会出问题。如果不是根路径，则需要配置文件夹路径。Pinia重复打包问题：多个页面引用同一个店铺，店铺会被重复打包。为了解决这个问题，需要在开始构建的时候全局注册，这样页面才被使用。目前仅为生产包配置。//打包解耦rollupOptions:{output:{manualChunks(id){//将pinia的全局库实例打包到vendor中，避免重复引入资源if(id.includes(path.resolve(__dirname,'/src/store/index.ts'))){return'vendor'}}}},待解决问题：目前Antd引入按需启动和构建加载问题待解决。Vite有一个插件unplugin-vue-components用于UI组件按需导入和配置。使用unplugin-vue-components后，Vite启动很慢。目前Vite和unplugin-vue-components都没有解决这个问题，有一些解决方案。importComponentsfrom'unplugin-vue-components/vite'import{AntDesignVueResolver}from'unplugin-vue-components/resolvers'Components({dts:true,dirs:['src/components'],//全局注册项目组件解析器:[AntDesignVueResolver({resolveIcons:true})],extensions:['vue']})目前给出的最优方案是生产打包采用按需加载，开发采用全量加载。结论这一次，我分享一些个人观点。文笔不好请轻喷！！！！欢迎一起交流！！！！如果jym还有其他更好的解决方案，欢迎留言告诉我们！感激的！Vue3企业管理后台项目实战总结
