vite 多页面应用刷新页面时,不会在当前路由中,会返回到根路由

当我们用 vite 开发多页面应用的时候

如果在另一个页面中存在路由,那么我们刷新页面就会有问题

vite 并没有类似 webpack 的 serverFallback 方法

比如:

当我们访问 /nested/ 它是对的,它会到 /nested 项目

当我们访问 /nested/getInfo/xx 等路由的时候,刷新页面会发现,页面会回到 根项目,而不是当前项目

我们没发配置静态路径回滚,当前我的解决方法是:

plugins: [
    {
      name: "rewrite-middleware",
      configureServer(serve) {
        serve.middlewares.use((req, res, next) => {
          if (req.url.startsWith("/nested/")) {
            if (req.url.includes("src")) {
              req.url = req.url
            } else {
              req.url = "/nested/"
            }
          }
          next()
        })
      },
    }
]

加一个 plugin 将 路径强制导到 /nested/ 项目下 

但是问题是,他有静态资源,比如我写的那个 includes('src'),如果他有多个静态资源怎么办?

我没法判断是路由还是静态资源,当前写了一个 issue 会持续跟进解决这个问题,找到最好的解决方法

以上是我个人的解决思路

=======================================

官方人员给了我一些建议,现在最好的解决方法,只能是封装成一个函数了(我能想到的最好方法)

我将我的 plugin 封装成了一个可以接收参数的函数,这样起码用起来感觉还是挺漂亮的

const rewritePlugin = (path, excludes) => ({
  name: "rewrite-middleware",
  configureServer(serve) {
    serve.middlewares.use((req, res, next) => {
      if (req.url.startsWith(path)) {
        const isRaw = excludes.some((dir) => req.url.includes(dir))
        if (!isRaw) req.url = path
      }
      next()
    })
  },
})

// 第二个参数,看你的项目中有哪些文件夹,都写上就可以了
plugins: [
  rewritePlugin('/nested/', ['/nested/src', '/nested/static'])
]

猜你喜欢

转载自blog.csdn.net/weixin_42335036/article/details/126019533