如何预渲染我的 laravel+vue 应用程序的子集？答案

【问题标题】：How can I prerender a subset of my laravel+vue application?如何预渲染我的 laravel+vue 应用程序的子集？
【发布时间】：2020-01-23 14:12:53
【问题描述】：

我有一个 laravel 应用程序，我的前端是用 Vuejs 编写的。我只想预渲染公共页面。 prerender-spa-plugin 的正确配置是什么？

网络上的大多数教程都展示了如何为整个网站执行此操作，但我只需要预渲染几个页面。我一定遗漏了一些东西，但我只得到一个空白页，并且在预渲染期间没有加载我的 javascript。我没有使用 vue 路由器。

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

// In the mix webpack config - 

  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'static'),
      // Required - Routes to render.
      routes: [ '/' ],
    })
  ]

错误消息：无法预渲染所有路由！

【问题讨论】：

How to pre-render multiple Vue app pages?的可能重复

标签： laravel vue.js webpack prerender

【解决方案1】：

静态部分的 javascript/vue 文件等都应该在静态目录中。如果它们位于您通常用于组织应用程序其余部分的文件夹中，它将不起作用。

您需要使用 HTMLwebpackPlugin 将 html 复制到输出目录（例如，公开）。混合的副本发生得太晚了。块将有助于仅获取您想要的 js 文件。

【讨论】：