Vue 路由器在使用 Quasar SSR 时不适用于根路径(“/”)

问题描述 投票:0回答:0

问题描述

我有一个 Quasar CLI (Webpack) 运行我的应用程序,它在 SPA 模式下工作得很好。 但是当我切换到SSR时。无处不在的 Vue Router 从路径“/”重定向到例如“/索引”不起作用。我的意思是,它显示一个空的“index.html”,但没有安装应用程序。 此问题仅适用于根(“/”)。重定向自“/feed”到“/feed/something”按预期工作。

路由器 > routes.js

const routes = [
  { path: '/', name: "Index2", redirect: '/index' },
  {
    path: '/index',
    name: 'Index',
    component: Index
  }, 
  // ...
]

所以我的问题是有没有办法使用根路径(“/”)来提供内容或重定向。

解决步骤

发展

我已经以非常不干净的方式解决了这个问题,如下所示

在 quasar.config.js > devServer

onBeforeSetupMiddleware: (server) => {
  server.app.use(function(req, res, next) {
    if(req.url === "/") res.redirect("http://localhost:8080/index")
    next()
  })
}

制作

这种方法在开发模式下工作得很好,但我仍然确信它不是最好的解决方案。

  1. 我尝试在第一个“SSR 中间件”中对生产构建做同样的事情
    输出:失败

  2. 所以我尝试将“相同的代码”放入“production-export.js”
    输出:失败

export default ssrProductionExport(async ({ app, port, isReady }) => {
  app.use(function(req, res, next) {
    if(req.url === "/") res.redirect("https://example.com/index")
    next();
  })
  await isReady()
    return app.listen(port, () => {
      console.log('Server listening at port ' + port)
  })
})
  1. 然后我变得非常绝望,所以我在实际导出的 SSR 服务器中尝试了相同的方法。
    输出:有效,但它是错误的,也是我能想到的最糟糕的方法。
    错误:错误:发送后无法设置标题。

dist > ssr > index.js

// function I added
m.use(function(req, res, next) {
  if(req.url === "/") res.redirect("https://example.com/index");
  next();
});

m.use(g("/"), S(".")); // This line was already in here

我将其视为临时解决方案,现在想知道使用某种“重写”规则使其在 NGINX 内部重定向是否更好。

感谢任何意见。

vue.js express server-side-rendering webpack-dev-server quasar
© www.soinside.com 2019 - 2024. All rights reserved.