Vue SSR 子级路线

问题描述

我有一个使用 SSR 启动并运行的 Vue 应用程序。 我将有几条路线，分别位于二级和三级，见下文：

         {
            path: "/blog",name: "blog",component: Blog
         },{
            path: "/blog/:category",name: "blog-category",component: Category
         },{
            path: "/blog/:category/:post",name: "blog-post",component: Post
         },

当我通过博客页面导航到 :category 和 :category/:post 路由时，一切正常。但是，刷新页面或直接登陆这些页面，它们不再在客户端正确加载，所有 vue 功能都停止工作。组件状态不再有效，vue devtools 无法加载，客户端控制台出现一些错误。

GET http://localhost:3000/blog/community/public/app.css net::ERR_ABORTED 404 (Not Found)
celebrating-national-homeownership-month:1130 GET http://localhost:3000/blog/community/public/app.js net::ERR_ABORTED 404 (Not Found)
celebrating-national-homeownership-month:1130 GET http://localhost:3000/blog/community/public/app.js net::ERR_ABORTED 404 (Not Found)

似乎在包中找不到引用的 css 和 js 文件，因为它们可能位于根目录中。

是否有解决方法可以绝对引用根目录以找到正确的内容，或者是否需要对 Vue-Router 进行不同的配置？

这里也是我的 server.js 文件供参考：

const createRenderer = (bundle) =>
   vueServerRenderer.createBundleRenderer(bundle,{
      runInNewContext: false,template: fs.readFileSync(path.resolve(__dirname,'index.html'),'utf-8')
   });
let renderer;

// you may want to serve static files with nginx or CDN in production
app.use('/public',express.static(path.resolve(__dirname,'./dist')));

if (process.env.NODE_ENV === 'development') {
   setupDevServer(app,(serverBundle) => {
      renderer = createRenderer(serverBundle);
   });
} else {
   renderer = createRenderer(require('./dist/vue-ssr-server-bundle.json'));
}

app.get("*",async (req,res) => {
   const context = {
      url: req.params['0'] || '/',// state: {
      //    title: 'Vue SSR Simple Setup',//    users: []
      // }
   };
   let html;

   try {
      html = await renderer.renderToString(context);
   } catch (error) {
      if (error.code === 404) {
         return res.status(404).send('404 | Page Not Found');
      }
      console.log(error);
      return res.status(500).send('500 | Internal Server Error');
   }
   res.end(html);
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）