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()
    }
})

资源/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配置中，您应该使用无头false来查看页面是否正确加载了内容。这可能是一个起点。

renderer: new Renderer({
  headless: false
})

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

1 个答案: