prerender-spa-plugin 预渲染

seo 优化
摘要由CSDN通过智能技术生成

优化点

1.vue组件处理成静态页面
2.每个页面不同title和meta
3.页面跳转链接改成a标签
4.title和meta支持多语言
5.多语言切换,通过URL带参数跳转

遇到问题及解决方案:

1.Error:Failed to launch chrome!

Error: Failed to launch chrome!
/var/lib/go-agent-2/pipelines/panda-web-beta-short/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
解决方案:
RUN sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \
&& sed -i 's|security.debian.org/debian-security|mirrors.ustc.edu.cn/debian-security|g' /etc/apt/sources.list \
&& apt-get update && apt-get install -y \
gconf-service libasound2 libatk1.0-0 \
libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 \
libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 \
libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 \
libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 \
libxss1 libxtst6 ca-certificates fonts-liberation \
libappindicator1 libnss3 lsb-release xdg-utils wget

RUN npm install && npm config set puppeteer_download_host = https://npm.taobao.org/mirrors

2.预渲染页面显示问题、点击事件失效、js不运行
原因:
预渲染之后的文件运行在客户端(浏览器)时会再次执行Vue实例化挂载的过程,而在打包编译预渲染的过程中id="app"的元素已经被替换了,因此在客户端执行的Vue无法正确挂载实例。
解决办法:
在路由容器外层元素中(一般是App.vue中class="main"的元素)再添加id="app"属性,提供给客户端的Vue进行实例挂载
3.可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值