时间戳

首页 > 解决方案 > Vue3：如何避免 Vitejs 在挂载应用程序时擦除/替换所有 DOM 内容？

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

问题描述

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

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

import { createApp } from 'vue'

createApp({

}).mount('#app');

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

标签： javascriptvue.jsvuejs3vite

解决方案

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

如果要挂载的应用程序/组件没有template选项或render功能，那么（并且只有在那时）Vue 会获取 DOM 元素的原始内容（在它挂载之前）并尝试将其编译为渲染函数（这就是您需要编译器 + 运行时的原因使用 in-DOM 模板时构建）

这也意味着，如果您的页面主要由静态 HTML（来自 WordPress）和仅“少量”的 Vue 组成，那么这个解决方案非常无效，也是petit-vue存在的原因（我建议阅读与标准 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>

那么有什么问题呢？

  1. 检查浏览器开发工具控制台是否有任何错误消息 - 如果（从 DOM 检索的模板的）编译步骤失败，Vue 确实不会呈现任何内容，并且感觉就像“Vue 在挂载后擦除所有内容”
  2. 谨防DOM 模板解析注意事项。浏览器倾向于在 Vue 从 DOM 读取无效 HTML 之前“修复”无效的 HTML - 可能会导致奇怪的错误
  3. 请务必使用包含模板编译器的 Vue 发行版。不这样做也会导致错误并删除所有内容

推荐阅读