Question

问题是，如果将“ /”添加到预渲染的路由中，然后在非“ /”页面上刷新，将导致浏览器使用预渲染的索引文件内容。

如何配置Vue和PSPA以便预先渲染根，而Vue知道使用原始（空）index.html文件来渲染未渲染的路由？

我试图在/ public中添加index.template文件，然后将其添加到PSPA配置中：

indexPath: path.join(__dirname, 'dist', 'index.template.html'),

但这无法建立。这是正确的方法吗？

Answer 1

我将提供一般解决方案。此解决方案还可以帮助使用prerender-spa插件加载时遇到“白闪”的人们，记录在这里：https://github.com/chrisvfritz/prerender-spa-plugin/issues/193

解决此问题的步骤是：

告诉Pre-SPA插件不要使用index.html作为其模板文件。

     indexPath: path.join(__dirname, 'dist', 'app.html')

告诉Vue（CLI 3）将此文件提供给Pre-SPA：

chainWebpack: config => {
  if (process.env.NODE_ENV !== 'production') return
    config
      .plugin('html')
      .tap(args => {
        args[0].template =  path.join(__dirname, 'public', 'index.html');
        args[0].filename =  'app.html';
          return args
        })
      }

将Web服务器配置为对根目录（“ /”）使用与所有其他路径不同的入口点。由于我使用的是Firebase，因此已将其添加到firebase.json：

  "rewrites": [
    {
      "source": "**",
      "destination": "/app.html"
    },
    {
      "source": "/",
      "destination": "/index.html"
    }
  ]

构建后，您的/ dist文件夹将具有一个app.html文件和一个index.html文件。

只要有人刷新您网站上尚未预渲染的页面，就会使用app.html文件。 app.html文件应该是“干净的”并且不包含任何预渲染的信息。

index.html文件仅在根目录下使用，并且具有所有预渲染的内容。

Answer 2

根据https://github.com/SolarLiner/vue-cli-plugin-prerender-spa#backend-routing-configuration-for-deployments上的文档，您应该在服务器配置中简单地将预呈现的路由指向index.html，将未预呈现的路由指向app.html。

Vue预渲染SPA-根目录覆盖模板文件

2 个答案: