prerender-spa-plugin 预渲染

优化点

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.可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配

你可能感兴趣的:(其他,前端,javascript,vue.js)