vue-cli-plugin-prerender-spa 生成错误未在 html 文件中找到

Question

我已经在我的 laravel-vue 应用上安装了这个插件，并在 laravel mix 的 webpack.mix.js 文件中设置了配置。

现在，当我通过 npm 运行它时（我使用 watch、dev 和 prod 来解决这个问题），它呈现时没有错误。 但是呈现的 html 文件在 title 标记内包含错误测试，并且在 pre 标记内找不到：http://prntscr.com/owcj6e

这是我的设置：

webpack.mix.js：

mix.webpackConfig({
    plugins: [
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, "dist"),
            routes: ["/", "/bulletin-board","/top-requests","/about-us","/sign-in"],
            postProcess(renderedRoute) {
                renderedRoute.html = renderedRoute.html
                    .replace(/<script (.*?)>/g, `<script $1 defer>`)
                    .replace(`id="app"`, `id="app" data-server-rendered="true"`)

                return renderedRoute
            },
            renderer: new Renderer({
                renderAfterTime: 5000,
                headless: true
            })
        })
    ]
});

resources/js/routes.js

import Router from 'vue-router';

export const router = new Router({
    mode : "history",
    routes : [
        {
            path    :   "/",
            name    :   "index",
            component   :   require("./client/Home.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/home",
            name    :   "home",
            redirect    :   "/",
            meta    :   { guest: true }
        },
        {
            path    :   "/my-account",
            name    :   "my-account",
            component   :   require("./client/MyAccount.vue").default,
            meta    :   { auth: true }
        },
        {
            path    :   "/bulletin-board",
            name    :   "bulletin-board",
            component   :   require("./client/BulletinBoard.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/top-requests",
            name    :   "top-requests",
            component   :   require("./client/TopRequests.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/about-us",
            name    :   "about-us",
            component   :   require("./client/AboutUs.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/privacy-policy",
            name    :   "privacy-policy",
            meta    :   { guest: true },
            component   :   require("./client/PrivacyPolicy.vue").default
        },
        {
            path    :   "/sign-in",
            name    :   "sign-in",
            component   :   require("./client/Login.vue").default
        },
        {
            path    :   "*",
            name    :   "404",
            meta    :   { guest: true },
            component   :   require("./components/404.vue").default
        }
    ]

});

router.beforeEach((to, from, next) => {

    if(to.matched.some(record => record.meta.guest)) {
        next()
    }else if( to.matched.some(record => record.meta.auth )) {
        if( localStorage.getItem('soundlaunch.user') == null ) {
            next( { name : "sign-in" })
        }else{
            next()
        }
    }else{
        next()
    }
})

resources/js/app.js

require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {router} from './routes.js';
import {store} from './store.js';
import VueSweetalert2 from 'vue-sweetalert2';

import App from './App.vue';

import Client from './layouts/Client.vue';
import Admin from './layouts/Admin.vue';

Vue.component('default-layout', Client);
Vue.component('sidebar-layout', Admin);

Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueSweetalert2);

const app = new Vue({
    el: '#app',
    router,
    store,
    components : {
        App
    },
    refreshData : { enabled : false }
});

我也在这里提交了我的问题：https://github.com/SolarLiner/vue-cli-plugin-prerender-spa/issues/42

非常感谢任何建议、建议和帮助。

谢谢。

Answer 1

看起来有点幼稚，但在您的 PrerenderSplaPlugin 配置中，您应该使用 headless false 来查看您的页面是否正确加载了内容。 这可能是一个起点。

renderer: new Renderer({
  headless: false
})