博客SSR重构过程中遇到的坑

2 分钟阅读

在这几天抽时间把自己的博客用Nuxt改造成了SSR(Server Side Render)的渲染方式 主要是因为博客无法被爬虫识别 所以在网上很难搜索到 于是花了两天的时间将博客整体的重构了一下 变成了一个SSR的项目 相比于传统的SPA 可以更好地支持SEO 打开速度也有了很多的提升 这里主要是说一下我遇到的一些坑

  1. 尽量不要用v-if 会造成浏览器和服务端生成的dom不一致 导致页面无法正确访问 使用v-show来达到同样的目的 虽然某些情况下会提升一些性能开销 不过稳定性显然更加重要
  2. 在windows系统使用pm2开启服务的时候是无法使用pm2 start npm --name "my-blog" -- run start这种命令的 不过好在Unix的系统应该都没什么问题 所以在服务器上可以通过这种方式来部署项目
  3. 在使用router.push({path:‘xxx’},params)这种方式跳转路由的时候一定要注意pages中文件名称的大小写,否则是无法进行正确的跳转的
  4. Nuxt默认生成的vuex的module是带命名空间的 调用的时候要注意 否则无法正确提交mutation
  5. asyncData中return的数据会和组件的data合并后渲染 需要对vuex做操作的话最好在fetch函数中
  6. 对于只需要在客户端执行的代码可以判断一下process.env.VUE_ENV === 'client' 否则如果使用window和docement等只在浏览器端有的对象会报错 导致无法正常运行
  7. assets目录中的资源会被webpack打包编译 需要编译的资源放在assets目录下 不需要的放在static
  8. 需要全局注册的filter在plugins中引入之后注册进Vue即可

总体来讲迁移成本还不是特别的高 带来的性能提升也是肉眼可见的 虽然会给服务器带来一点压力 不过体验的提升绝对是值得的 希望我的经验能帮助大家避免一些不必要的坑

相关文章