前言

技术：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全局引入svgviteSvgIcons({    // 指定须要缓存的图标文件夹    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企业治理后盾我的项目实战总结