能否让Vue应用将组件渲染到页面多个独立DOM节点？

这种渐进式改造页面的需求正是Vue设计时重点支持的场景之一，完全不需要把整个页面作为Vue的根元素，你可以把不同的Vue组件分别渲染到页面的指定DOM区域，下面分Vue 3和Vue 2两种主流版本给出具体实现方案：

Vue 3 实现方式 #

假设你的静态页面里已经有了这些待替换的DOM节点：

<div id="header"></div>
<div id="score"></div>
<div id="reviews"></div>

你可以通过createApp创建多个应用实例，分别挂载到对应的节点上，如果组件需要共享状态（比如Pinia/Vuex store）或路由，只需要把同一个实例传入每个应用即可：

import { createApp } from 'vue'
import ReviewsSummaryComponent from './components/ReviewsSummary.vue'
import ScoreComponent from './components/Score.vue'
import ReviewsComponent from './components/Reviews.vue'
import store from './store' // 共享的状态管理实例
import router from './router' // 共享的路由实例

// 渲染评论汇总组件到#header
const headerApp = createApp(ReviewsSummaryComponent)
headerApp.use(store).use(router)
headerApp.mount('#header')

// 渲染评分组件到#score
const scoreApp = createApp(ScoreComponent)
scoreApp.use(store).use(router)
scoreApp.mount('#score')

// 渲染评论列表组件到#reviews
const reviewsApp = createApp(ReviewsComponent)
reviewsApp.use(store).use(router)
reviewsApp.mount('#reviews')

Vue 2 实现方式 #

如果你的项目还在使用Vue 2，同样可以通过创建多个Vue实例来实现：

<div id="header"></div>
<div id="score"></div>
<div id="reviews"></div>

import Vue from 'vue'
import ReviewsSummaryComponent from './components/ReviewsSummary.vue'
import ScoreComponent from './components/Score.vue'
import ReviewsComponent from './components/Reviews.vue'
import store from './store'
import router from './router'

// 挂载评论汇总组件
new Vue({
  store,
  router,
  render: h => h(ReviewsSummaryComponent)
}).$mount('#header')

// 挂载评分组件
new Vue({
  store,
  router,
  render: h => h(ScoreComponent)
}).$mount('#score')

// 挂载评论列表组件
new Vue({
  store,
  router,
  render: h => h(ReviewsComponent)
}).$mount('#reviews')

注意事项 #

• 如果组件之间不需要共享状态或路由，可以不用传入store和router，每个Vue实例会独立运行，互不干扰。
• 确保挂载时目标DOM节点已经存在于页面中，如果是动态生成的节点，需要等节点渲染完成后再执行挂载操作。
• 这种方式非常适合你的渐进式改造计划：先替换需要交互的核心区域，后续逐步迁移其他部分，最终平滑过渡到完整的SPA应用。

内容的提问来源于stack exchange，提问作者Anton Pleshivtsev