网络日志

Vue3企业管理后台项目实战总结

前言

技术:Vue3+Vite+TS+Pinia+Ant-Design-Vue

代码规范:Eslint+Prettier

依赖管理:Pnpm

简介:后台管理系统都会有关于不同用户不同权限的区分,就需要针对不同用户展示不同内容,项目采用动态添加路由方式,路由分成两类,静态路由和动态路由。静态路由是任何菜单权限下都能查看的界面路由,动态路由是根据菜单权限动态生成的路由集合,所有路由权限统一由后端接口输出。另外对页面中元素也可以做权限控制,在和后端一起做方案设计的时候定制了5个分类权限类型(1-列表,2-列表的搜索框,3-按钮(接口),4-字段加密,5-嵌套页面)。

技能点总结

Svg的使用

svg的使用常常采用组件形式,vite需要使用vite-plugin-svg-icons插件,在vite.config.ts的plugins中全局引入svg文件。项目采用自有svg及antDesign 的组件 icon混用。

// vite全局引入svg
viteSvgIcons({
    // 指定需要缓存的图标文件夹
    iconDirs: [resolve(root, 'src/assets/icons')],
    // 指定symbolId格式
    symbolId: 'icon-[dir]-[name]',
    // 压缩
    svgoOptions: true
})
// 简单常用svg组件
<svg class="svg-icon" :class="iconClass" aria-hidden="true">
  <use :xlink:href="iconName" />
</svg>
  • 引入外部 svg 的 Icon,vite-config.ts 中设置了引入路径为 src/assets/icons,使用时只需要加上文件名,如下:

    <svg-icon icon-name="Accounts"></svg-icon>
  • 在 main.ts 中引入所有的 antDesign 的组件 icon,命名为 ant+原组件名称,注意组件名后面都有 3,且首字母大写加驼峰,使用如下:

    <left-outlined /> <svg-icon icon-name="ant-leftOutlined3"></svg-icon>

    环境配置

vite配置多环境,分别配置多环境的变量,可以通过vite-plugin-environment插件透传环境变量

  • env.dev 开发环境
  • env.test 测试环境
  • env.prod 生产环境
import EnvironmentPlugin from 'vite-plugin-environment'
plugins: [
    EnvironmentPlugin(['']), // 插件透传环境变量
]

鉴权组件

针对后端返回的(1-列表,2-列表的搜索框,3-按钮(接口),4-字段加密)不同key来做鉴权处理,对页面的按钮,搜索项,用鉴权组件包裹,在页面初始渲染时做处理。

动态路由

在登录管理后台获取到接口返回的权限数据,然后对数据解析组装,使用router.addRoute添加路由,使用pinia管理。

有2个问题点注意:

  • 动态路由在页面刷新后会丢失,所以页面刷新需要在main.ts中再次添加路由,为了防止重复添加,需要设置一个标记来做判断。

    在登录页面对路由数据做解析交给pinia去管理,pinia对路由数据做数据持久化(pinia的持久化使用pinia-plugin-persist插件)处理。再加一个是否添加过路由的标记state。根据标记state在main.ts获取pinia中的路由再添加一遍。

    // 做单个store持久化处理
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'mainStore'
            }
        ]
    },
  • 在对接口数据解析的时候,对router中的component的解析需要使用vite的import.meta.glob来对文件的引入,否则生产构建的包会报路由错误。

    有关import.meta.glob的解释,可以去vite官网看看,注意引入的路径层级需要匹配

    // 获取需要引入的文件相对路径
    const modules = import.meta.glob('./views/**/*.vue')
    // 使用modules去查找需要引入的文件
    router.addRoute({
        name: 'home',
        path: '/home',
        component: modules[`./views/${文件夹名}/${文件名}.vue`]
    })

问题点

部署问题:vite打生产包的时候,对于配置base路径的问题。生产是放置在根路径的话,base是不需要配置的(直接去掉配置),否则生产包访问会出现资源路径问题,如不是根路径的话,就需要配置文件夹路径。

pinia重复打包问题:在多个页面引用同一个store,会重复打包这个store。解决这一问题就需要在启动构建的时候在全局去注册,这样页面只做使用就好。目前只针对生产包做了配置。

// 打包解耦
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 都没有解决这个问题 Issues,其中有些解决办法。

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
Components({
    dts: true,
    dirs: ['src/components'], // 全局注册项目组件
    resolvers: [AntDesignVueResolver({ resolveIcons: true })],
    extensions: ['vue']
})

目前给出的最优解也就是生产打包使用按需加载,开发时使用全量加载。

结语

本次分享的是个人的一些浅见,写的不好请轻喷!!!!欢迎一起交流!!!!

如果jym有其他更好的办法,欢迎留言告知!感谢!

Vue3企业管理后台项目实战总结