记录使用Nuxt开发服务端渲染项目时遇到的问题难点整理（不定时更新）

因为公司官网SEO优化问题，必须要用服务端渲染，prerender-spa-plugin预渲染插件不能满足需求。在此记录整理，Nuxt开发服务端渲染项目时遇到的问题难点（不定时更新）

1、掘金上有一些很不错的Nuxt教程文章，推荐几篇：
https://juejin.im/post/6844903475847888903#heading-8
https://juejin.im/post/6844903705414746120#heading-4
https://juejin.im/post/6844903833840123912#heading-18
https://www.jianshu.com/p/840...

2、在使用window对象时，页面有时会报错window is not defined，解决方法：

//用process.client判断是否客户端，包着window对象的代码就行
if (process.client) {
}

3、asyncData、fetch、validate使用范围。
只能在页面组件使用，即pages目录下的组件，components目录下的公共组件不可以使用这两个生命周期方法，参考：https://zh.nuxtjs.org/api/。
如果页面模块很多，比如像我vue-cli项目那样（参考下图1），首页分了7个子组件，如果在nuxt里也这么Ctrl c - Ctrl v把文件夹照搬过去肯定是不行的，那这个7个子组件只能放到nuxt项目的根目录下的components目录里（参考下图2），然后在pages目录下的homePage.vue父组件里正常引入这7个子组件，如果要考虑SEO，这些子组件从接口获取的数据必须要在asyncData、fetch这两个生命周期里写入，那么这种情况下，只能在pages目录下的homePage.vue的asyncData、fetch这两个生命周期里获取好动态数据，并通过props或vuex传给子组件，这样操作下来，整个首页在查看网页源代码时，各个子组件的DOM结构都是正常插入动态数据了，那么SEO爬虫就可以正常爬取到，其他页面类似操作同理。
图1:

图2:

4、vue-cli创建的项目，即客户端渲染，在详情页类型的文章页面中，如果右侧列表有同类型的文章，那么在点击跳转路由时，需要用到beforeRouteUpdate，判断from来源是不是本路由，是的话则把详情id更新为to路由对象里的id即可，参考Vue Router官方文档：https://router.vuejs.org/zh/g...

//我的代码是这样
beforeRouteUpdate(to, from, next){
    next();
    // console.log(to, from, next)

    if(from.path.indexOf('NewsDetails') != -1){
        this.newsId = to.params.newsId;
        //更新新闻资讯详情数据
        this.getNewsDetailsData();
    }
},

而Nuxt服务端渲染的项目，我做到这个功能点时，发现不需要写beforeRouteUpdate路由钩子，处理判断，页面也能正常跳转展示正确的数据。

5、报错：Computed property "xxx（此处是vuex state的一个变量名）" was assigned to but it has no setter.
是因为vuex是单项流，v-model是双向绑定。
我这个报错的业务场景是，公共组件login、register的modal框，控制是否显示隐藏，我的项目使用的是antD vue UI组件库，modal组件的参数由 v-model="loginModalShow" 改为 :visible="loginModalShow" 即可解决报错。

6、也可以像vue-cli项目一样，在plugin目录下新建route.js文件，在这里配置全局守卫，然后在nuxt.config.js里的plugins引入好就可以生效了，参考下图。