在vue项目中使用预渲染
来源:8-5 预渲染页面【提前完成任务的意义】

jy_li
2021-11-12
老师您好,我在vue项目(hash模式)中尝试使用react-snap进行预渲染,下面几种配置都尝试过,但一直报错
package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"dll": "webpack --config build/webpack.dll.conf.js",
"analyze": "source-map-explorer 'dist/static/js/*.js'",
"postbuild": "react-snap"
},
"reactSnap": {
"source": "dist",
"minifyHtml": {
"collapseWhitespace": false,
"removeComments": false
},
"inlineCss": true, // 加和不加效果都一样
},
main.js
new Vue({
el: "#app",
router,
store,
components: { App },
template: "<App/>"
});
// 这段代码加和不加效果都一样
window.snapSaveState = () => {
document.querySelector("#app").setAttribute("data-server-rendered", "true");
};
报错:
Uncaught ReferenceError: webpackJsonp is not defined
我尝试过手动更改index.html中引入的js文件顺序,报错确实不报了,但页面无法交互,点击事件无效,逻辑也有点问题,少部分样式会不对。
这个插件我没解决怎么用,然后去尝试了一下prerender-spa-plugin插件,但预渲染无效,看了很多教程后都说是需要history模式才可以。
我想问下老师我使用react-snap插件报错是否能解决,如果不能解决是否还有其他插件可以用。
写回答
1回答
-
Mr_Max
2021-11-13
同学你好!
几个vue预渲染的插件:https://awesome-vue.js.org/components-and-libraries/prerendering.html
react-snap应该还是首推的。具体到你的问题,可能要到源码里调试一下看看具体原因。从它历史的issue中有一个相关的可以参考一下:
https://github.com/stereobooster/react-snap/pull/17000
相似问题