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

3 篇文章 0 订阅

当我们用 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'])
]

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值