nuxt生产环境报错:Failed to execute 'appendChild' on 'Node': This node type does not support this method...

nuxt生产环境报错:Failed to execute 'appendChild' on 'Node': This node type does not support this method.异常的解决

异常的出现

使用nuxt+bootstrapvue4开发环境正常但是部署生产环境，页面刷新后出现如下异常：

ee6f0f3a7cfcdff72172.js:1 Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

最终确定出错的位置在：

<b-pagination :total-rows="totalRows"
                      :per-page="perPage"
                      v-model="currentPage"
                      size="sm"
                      align="center"
                      @input="getArticleList"
                      class="my-0" >
</b-pagination>

这个是bootstrapvue的分页组件，如果将该组件去掉，刷新页面就正常，加上该组件刷新页面就报上面的异常

我的思路分析：

刷新页面会出现异常，页面点击路由跳转则正常，那应该是服务端渲染出的问题。然后将上面的组件使用了<no-ssr>包含起来，然后重新测试异常消失了。

解决方案

最终解决方案：使用<no-ssr></no-ssr>将出错代码包含起来。

<no-ssr>
    <b-pagination :total-rows="totalRows"
                          :per-page="perPage"
                          v-model="currentPage"
                          size="sm"
                          align="center"
                          @input="getArticleList"
                          class="my-0" >
    </b-pagination>
</no-ssr>