在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/170

//img.mukewang.com/szimg/618ea9bf09330c1c18500238.jpg


0
0

前端性能优化企业级解决方案 6大角度+大厂视野

只要项目还在线,性能优化永远是时刻要关注的问题

1109 学习 · 226 问题

查看课程