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

Posted 2023-02-22

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

【英文标题】：vue-cli-plugin-prerender-spa generate with error not found inside html file

【发布时间】：2019-12-28 08:21:02

【问题描述】：

我已经在我的 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

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

谢谢。

【参考方案1】：

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

renderer: new Renderer(
  headless: false
)

【讨论】：

我对 laaaaateeee 的响应表示歉意，我已经尝试过了，但它只会生成相同的预渲染 HTML 文件错误