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

2023-05-16

使用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>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐