前言技术: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企业管理后台项目实战总结