> 原创文章 > Vue单页面SEO优化,预渲染prerender-spa-plugin遇到的坑(项目想要放在服务器子目录时,无法打包的问题)
简介 有时候在生产环境中,想要测试一下预渲染打包之后得页面,由于项目部署在服务器子页面,使用预渲染打包的时候出现无法打包的问题,卡在自动测试软件...

Vue如何作SEO优化,不清楚的同学可查看我之前写的一篇关于Vue SEO的文章。

vue解决seo的优化,单页面seo优化,预渲染prerender-spa-plugin

进入正题

想要将项目放在服务器子目录情况下,一般情况下直接在vue.config.js修改publicPath就行了。但由于使用了预渲染,这情况就会出现打包失败的问题。

1.  在 vue.config.js 把  renderAfterDocumentEvent: 'render-event'  这行代码注释掉;

2.  在 main.jsdocument.dispatchEvent(new Event('render-event'))注释掉

     替换成  document.dispatchEvent(new Event('custom-render-trigger'))

3.  直接把 publicPath 改成想要放项目的目录(注意在路由文件里base需要改成相对应的),

4.   npm run build 大功告成。


需要注意的是,如果项目有移动端的链接(预渲染会执行每一个页面),可能会出现打包失败的问题,因为预渲染调起的浏览器为PC端页面。常见操作的就是在项目入口的时候作了 设备判断,通过不同设备跳转不同项目,这时候就需要将跳转做一下延迟执行,使用setTimeout可解决。

上一篇: Vue 移动端适配方案,淘宝弹性布局方案(lib-flexible + px2rem-loader) 下一篇: 瞅什么瞅,没有下一篇了...