如何在服务端渲染(SSR)页面中使用Vue组件且不覆盖原有内容

原有配置原理说明 #

你新增的Vite别名配置是将Vue依赖指向了带模板编译器的完整构建版本，这个版本可以直接读取页面中已有的SSR渲染的HTML内容作为模板，识别你注册的组件标签原地渲染，因此不会覆盖原有内容。该版本相比生产环境常用的runtime-only版本仅增加约10KB gzipped的体积，如果改造范围不大，这个体积损耗完全可以接受。
注意你当前的入口代码存在顺序错误，需要先注册全局组件再执行挂载，否则组件无法被正确识别，修正后写法如下：

import { createApp } from 'vue'
import TestingComponent from './components/TestingComponent.vue';

const app = createApp({})
// 先注册组件
app.component('testing-component', TestingComponent)
// 后执行挂载
app.mount("#app")

无额外体积的最优方案：使用Vue自定义元素 #

如果不想引入模板编译器增加体积，可以直接将Vue组件编译为原生自定义元素，不需要全局挂载#app容器，完全不会改动页面原有SSR内容，是渐进式改造的首选方案：

1. 移除vite.config.js中关于vue的别名配置，恢复为默认的runtime-only版本
2. 修改组件注册逻辑：

import { defineCustomElement } from 'vue'
import TestingComponent from './components/TestingComponent.vue';

// 将Vue组件转换为原生自定义元素
const TestingElement = defineCustomElement(TestingComponent)
// 注册到浏览器自定义元素注册表
customElements.define('testing-component', TestingElement)

3. 页面中使用方式不变，仍然直接写<testing-component></testing-component>即可，浏览器会自动识别该标签并渲染对应的Vue组件，不会影响其他原有内容。

内容的提问来源于stack exchange，提问作者Bob Voorneveld