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