prerender-spa-plugin的路由模式

Question

朋友们，最近使用vue的插件prerender-spa-plugin，看了很多帖子，然后把他们的都试了一遍，结果就是history模式的时候，打包不会出现相应路由的文件夹，hash的反倒会有，但我看帖子都说的是，路由模式必须要history，我这个是什么情况呀，然后配置我试了好多帖子的，都是这种情况

```html

//  引入插件
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");

module.exports = {
    configureWebpack: (config) => {
        if (process.env.NODE_ENV !== "production") return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname, "dist"),
                    // 对应实际路由文件，比如/about有参数，就需要写成 /about/**。
                    routes: ["/", "/medical", "/publicize", "/assess", "/bespeak", "/"],
                    server: {
                        proxy: {
                            "/serverApi": {
                                target: "http://localhost:5500/test",
                                changeOrigin: true, //是否跨域
                                pathRewrite: {
                                    "^/serverApi": "", //需要rewrite重写的,
                                },
                            },
                        },
                    },
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: "bar",
                        },
                        renderAfterDocumentEvent: "render-event",
                        renderAfterElementExists: "#app",
                        renderAfterTime: 10000,
                    }),
                }),
              
            ],
        };
    },
};

```

Answer 1

根据你的描述，你的项目使用的是Vue框架，并使用prerender-spa-plugin插件进行预渲染。根据你提供的配置和错误信息，我们可以发现这个问题可能与你的静态文件路径有关。

prerender-spa-plugin插件会在预渲染时根据你指定的路由生成静态HTML文件。在生成静态HTML文件时，它会尝试匹配你的路由模式（history或hash）并生成相应的路由文件夹。预渲染的文件和路由应该在同一级目录下。

在你的配置中，你将静态文件的目录设置为"dist"，但是我们无法确认你的路由文件是否位于同一级目录下。如果你的路由文件不在位于"dist"目录下，那么这就是你的问题。

你可以尝试将路由文件放到和"dist"目录同一级的位置，并将预渲染插件的静态文件目录设置为路由文件所在的路径。

如果你的路由文件已经位于正确的位置，那么你需要尝试调整插件的其他配置来解决这个问题。以下是一些可能有用的提示：

1. 你可以尝试将插件的renderer配置中的renderAfterDocumentEvent参数设置为'prerender-trigger'，例如：

renderer: new Renderer({
  renderAfterDocumentEvent: 'prerender-trigger',
  //其他配置
})

在你的应用程序中，你需要在Vue的钩子函数created()中触发一个自定义事件'prerender-trigger'，例如：

created() {
  if (typeof window === 'object') {
    window.dispatchEvent(new Event('prerender-trigger'));
  }
}

这个事件可以触发预渲染插件开始生成静态HTML文件。

1. 你可以尝试将插件的renderer配置中的renderAfterTime参数设置为更长的时间，例如：

renderer: new Renderer({
  renderAfterTime: 20000, //等待20秒后再生成静态文件
  //其他配置
})

这样可以确保你的Vue应用程序在预渲染之前完全加载，并准备好生成静态HTML文件。

希望以上提示对你有所帮助！如果还有其他问题，请随时问我。