Vue3：如何避免 Vitejs 在挂载应用程序时擦除/替换所有 DOM 内容？

Posted 2023-03-16

【中文标题】Vue3：如何避免 Vitejs 在挂载应用程序时擦除/替换所有 DOM 内容？

【英文标题】：Vue3: how to avoid Vitejs to erase/replace all DOM content when mounting the app?

【发布时间】：2021-11-04 09:22:22

【问题描述】：

我来自 Vue 2，我习惯于拥有我的 wordpress 标准 html 页面并在其中使用一些 Vue 组件。只需将容器传递给主应用程序el 属性，然后我就可以在容器上使用我想要的组件，而无需删除或替换所有默认容器的内容。基本上，将一个 dom 元素传递给 el 属性，使该元素成为一个 Vue 应用程序，包括其所有内容（即使没有任何 Vue 组件）。

使用 Vue 3 和 createApp，似乎没有办法做到这一点，因为一旦我将应用程序安装到容器（比如 #app），那么容器的所有内容都会被删除或替换为组件的模板（如果组件通过）。甚至以下不使用任何组件的内容，都会清除所有#app原始内容：

import  createApp  from 'vue'

createApp(

).mount('#app');

如何避免？如何在免费的 html 页面上只使用一些备用组件？那么 SFC 使用同样的方式呢？

【问题讨论】：

你需要比这更具体，Vue 3仍然支持in DOM templates

谢谢，我编辑了我的问题。基本上，改变的是使用 Vue2 的 el 属性，您可以传递现有的 html 页面并将其作为 Vue 应用程序获取。现在不是这种情况了。似乎没有办法保留现有的标记。

【参考方案1】：

从技术上讲，Vue 总是替换元素的内容（Vue 2 替换了元素本身，Vue 3 替换了它的内部内容 - migration guide）

IF 被挂载的应用程序/组件没有template 选项或render 函数，然后（并且只有这样）Vue 获取 DOM 元素的原始内容（在它挂载之前）并且尝试将其编译为渲染函数（这就是为什么在使用 in-DOM 模板时需要Compiler + runtime build）

这也意味着，如果您的页面主要由静态 HTML（来自 WordPress）和仅“少量”的 Vue 组成，则此解决方案非常无效，这也是petit-vue 存在的原因（我建议阅读Comparison with standard Vue

无论如何。我无法重现您的问题...

const app = Vue.createApp(
).mount("#app")

<script src="https://unpkg.com/vue@3.2.9/dist/vue.global.js"></script>
<div id='app'>
  <div>
    <h2>Hello from HTML!</h2>
  </div>
</div>

那么有什么问题呢？

检查浏览器开发工具控制台是否有任何错误消息 - 如果（从 DOM 检索的模板的）编译步骤失败，Vue 确实不会渲染任何内容，并且感觉就像“Vue 在挂载后擦除所有内容” 当心DOM Template Parsing Caveats。浏览器倾向于在 Vue 从 DOM 读取无效 HTML 之前“修复”无效 HTML - 可能导致 strange errors 请务必使用包含模板编译器的 Vue 发行版。否则也会导致错误并删除所有内容

【讨论】：

嗯，我正在使用 Vitejs：这可能是问题吗？

@LucaReghellin 检查this