javascript - vue-cli-plugin-prerender-spa 生成错误,在 html 文件中找不到
问题描述
我已经在我的 laravel-vue 应用程序上安装了这个插件,并在 laravel mix 的 webpack.mix.js 文件中设置了配置。
现在,当我通过 npm 运行它时(我使用 watch、dev 和 prod 来解决这个问题),它呈现时没有错误。但呈现的 html 文件在标题标签内包含错误测试,在前标签内找不到: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
})
})
]
});
资源/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
任何建议、建议和帮助都将受到天堂般的赞赏。
谢谢你。
解决方案
它看起来有点天真,但在您的 PrerenderSplaPlugin 配置中,您应该使用 headless false 来查看您的页面是否正确加载了内容。这可能是一个起点。
renderer: new Renderer({
headless: false
})
推荐阅读
- python - 如何在 .txt 文件中查找文本并在 Python 中将其打印到控制台中
- python - 用python计算字符串的HMAC问题
- kubernetes - 3 个 pod,当 Replicas 设置为 2
- sql - 来自 (SELECT VALUE FROM STRING_SPLIT()) 的矛盾结果
- android - 如何在颤振中使用与 webapp 中相同的格式?
- python - Django 序列化 json
- matlab - 子图的链接轴回调
- algorithm - 如何在正交模式下模拟视场?
- python - 对 NetfilterQueue 延迟函数使用 Multi 处理
- python - Dynamic created nested model in pydantic