关于前端: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 企业治理后盾我的项目实战总结