Vue.js 3 ssr 中报错Hydration node mismatch: - Client vnode: div - Server rendered DOM:已解决

原创已于 2024-01-17 09:17:26 修改 · 5.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

于 2023-02-25 00:14:36 首次发布

ssr 同时被 2 个专栏收录

1 篇文章

订阅专栏

css3

1 篇文章

订阅专栏

在Nuxt框架结合ElementUI和Vue3的项目中，遇到开发阶段的代码同步问题，可以通过执行build命令来解决，此问题在部署后未重现。在vue.config.js中，移除了vue、js和ts的cache-loader。在app.vue中，使用了keep-alive和router-view进行组件缓存。

使用nuxt框架+ element + vue3 出现该问题解决方案

该问题其实是由于在开发阶段本地服务器的代码与浏览器的代码不一致导致的问题，可以执行一次build命令，可以解决该问题，实际到部署之后并未复现该问题。

vue.config.js中


module.exports = {
    chainWebpack: webpackConfig => {
        webpackConfig.module.rule('vue').uses.delete('cache-loader')
        webpackConfig.module.rule('js').uses.delete('cache-loader')
        webpackConfig.module.rule('ts').uses.delete('cache-loader')
    }
}

app.vue中


<template>
    <div>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
</template>