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