脚本宝典收集整理的这篇文章主要介绍了使用 prerender-spa-plugin 预渲染 vue,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
例如:
<body>
<div id="app"></div>
</body>
// app.vue
<template>
<div id="app"></div>
</template>
因为预渲染时会消耗掉第一个 id,生成初始的html,如果需要后续的交互,那么app.vue 里也需要一个 id 供 vue 创建实例
// webpack plugins
new PrerenderPlugin({
// 生成 html 的文件夹
staticDir: '/absolute/path',
// 需要访问的 html 文件名
indexpath: 'xxx.html',
// 渲染后输出 html 的文件夹,暂时只能输出 index.html,不能改名字
// 由于不能改名字,可以先输出到缓存文件夹,再用 copy-webpack-plugin 改名
outputDir: '/output/dir',
// 需要渲染的路由
routes: ['/'],
// html文件压缩
minify: {
minifyCSS: true,
removeComments: true,
},
// 渲染器
renderer: new Renderer({
// 多个触发条件的话第一个才有效
// 触发渲染的时间,用于获取数据后再保存渲染结果
renderAfterTime: 5000,
// 触发渲染的事件, document.dispatch(new Event('vue-mounted'))
// renderAfterDocumentEvent: 'vue-mounted',
// 触发渲染的元素,该元素生成后就保存渲染结果
// renderAfterElementExists: '#app',
// 是否打开浏览器,false 是打开。可用于 debug 检查渲染结果
// headless: false,
}),
server: {
// 代理,用于发送请求,设置与 webpack-dev-server 并不完全相同
Proxy: {
'/api': {
target: 'http://localhost:' + config.prod.port || 3050,
pathrewrite: {
'^/api': '/',
},
},
// proxy的属性用于exPress: app.use(key, proxy[key])
// '/:foo': { target }, 可以不匹配 '/'
},
},
})
以上是脚本宝典为你收集整理的使用 prerender-spa-plugin 预渲染 vue全部内容,希望文章能够帮你解决使用 prerender-spa-plugin 预渲染 vue所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。