vite打包正式环境上路由页面不能正确加载的解决方案

问题描述

在本地开发环境中页面都能动态加载本地图片加载 网页，但是执行打包命令后本地图片加载 网页，产生了点击路由控制台输出找不到页面的报错

component: () => import(/* @vite-ignore */`/src/views${item__.pageName}.vue`)

多次尝试修改引入文件路径发现并不能生效，于是看了一下vite的官方文档

, 发现vite升级到2.0的版本后, 多出一个方法,import.meta.glob, 可以动态引入路由，于是尝试这种方法

//加载views下面的所有vue和tsx的文件
const modules = import.meta.glob('../../views/**/*.{vue,tsx}')
//匹配路由，将本地模块返回，此处搬运了vben的官方写法
function dynamicImport(
  dynamicViewsModules: Record Promise>,
  component: string,
) {
  const keys = Object.keys(dynamicViewsModules)
  const matchKeys = keys.filter((key) => {
    const k = key.replace('../../views', '')
    const startFlag = component.startsWith('/')
    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx')
    const startIndex = startFlag ? 0 : 1
    const lastIndex = endFlag ? k.length : k.lastIndexOf('.')
    return k.substring(startIndex, lastIndex) === component
  })
  if (matchKeys?.length === 1) {
    const matchKey = matchKeys[0]
    return dynamicViewsModules[matchKey]
  } else {
    warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!')
    return EXCEPTION_COMPONENT
  }
}
//根据后端的路由地址跟本地模块匹配，设置本地路由
let current = dynamicImport(modules,item.url)
component = current
//....
router.push({
  //....
component,
})

此时本地能正常运行，打包后也能正常请求到界面。