vue 在SSR期间,如果异步组件加载失败/动态组件中的错误组件未在SSR期间使用,则会出现无效的HTML,

uurity8g  于 4个月前  发布在  其他
关注(0)|答案(2)|浏览(55)

版本

2.7.13

复现链接

replit.com

复现步骤

  1. 打开上面的replit链接。
  2. 点击运行。
  3. 注意,从 renderToString() 输出的HTML是无效的(它缺少一个 </div> ,并且在 AsyncComp 之后模板的其余部分也丢失了)。
    或者,如果你想在本地复现:
  4. 声明一个具有Async Factory函数的动态加载组件
  5. 使组件加载承诺被拒绝
  6. 注意,在模板中使用Async组件的地方,输出的HTML被中断

预期结果是什么?

在SSR期间,当异步组件加载失败时,声明在异步工厂中的错误组件应该被选中。
预期的输出(与replit链接相关):

<app data-server-rendered="true"><div>I always render</div> <p>An error happened during SSR</p> <div>I won't render if AsyncComp rejects</div></app>

实际发生的情况是什么?

在异步组件加载失败的地方,HTML渲染被中断,生成了无效的HTML。
这个字符串被输出:
实际的输出(与replit链接相关):

<app data-server-rendered="true"><div>I always render</div>

相关问题