将多页面Vue应用嵌入外部网站：Web Components方案及生态适配咨询

一、Web Components是否是最优方案？ #

取决于你的核心嵌入场景：

• 如果需要支持跨技术栈嵌入（比如宿主网站是React、Angular、原生JS等非Vue技术栈），Web Components是非常合适的选择——它是浏览器原生标准，无需宿主环境额外依赖，能保证嵌入后的兼容性和独立性。
• 如果你的目标嵌入场景仅为Vue项目，直接开发成Vue插件或组件库会更高效：可以完全复用Vue生态的开发体验，无需处理Web Components的样式隔离、上下文适配等额外问题。

你偏好Vue框架的选择没问题，Vue官方对Web Components的支持已经足够成熟，不需要切换到Lit/Stencil。

二、解决Pinia与vue-router的初始化问题 #

你提到的“临时实例复制上下文”是绕远路了，其实每个Vue自定义元素实例本身就是一个独立的Vue应用上下文，完全可以在自定义元素的根组件中直接初始化Pinia和vue-router，无需依赖全局应用实例。

具体实现步骤 #

1. 封装根组件，集成Pinia和Router
   创建一个根包裹组件，在其setup中独立初始化Pinia和路由，确保每个自定义元素实例拥有独立的状态管理和路由上下文：

<!-- RootApp.vue -->
<script setup>
import { createPinia } from 'pinia'
import { createRouter, createWebHashHistory } from 'vue-router'
import PageHome from './pages/PageHome.vue'
import PageProfile from './pages/PageProfile.vue'

// 初始化Pinia
const pinia = createPinia()
// 初始化路由（推荐用hash模式，避免与宿主网站路由冲突）
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: PageHome },
    { path: '/profile', component: PageProfile }
  ]
})

// 手动触发路由初始化
router.isReady()
</script>

<template>
  <div class="vue-app-container">
    <router-view />
  </div>
</template>

<style scoped>
.vue-app-container {
  width: 100%;
  min-height: 400px;
}
</style>

2. 将根组件转为Web Component
   使用Vue的defineCustomElement工具将根组件编译为自定义元素，注册后即可在任意网站中使用：

// main.js
import { defineCustomElement } from 'vue'
import RootApp from './RootApp.vue'

// 定义自定义元素
const VueEmbeddedApp = defineCustomElement(RootApp)
// 注册到浏览器自定义元素注册表
customElements.define('vue-embedded-app', VueEmbeddedApp)

3. 嵌入到宿主网站
   宿主网站只需引入编译后的JS文件，直接使用自定义标签即可：

<!-- 宿主网站的HTML -->
<vue-embedded-app></vue-embedded-app>
<script src="./path/to/your-vue-app.js"></script>

额外优化点 #

• 传递配置参数：可以通过自定义元素的属性传递API地址、初始配置等，在Vue组件中用defineProps接收：

  <script setup>
  const props = defineProps({
    apiBaseUrl: {
      type: String,
      default: 'https://api.example.com'
    }
  })
  // 在Pinia或API请求中使用props.apiBaseUrl
  </script>
  

  宿主使用时：<vue-embedded-app api-base-url="https://custom-api.com"></vue-embedded-app>

• 事件通信：如果需要向宿主网站传递数据，在Vue组件中用defineEmits定义事件，触发时会自动转为浏览器自定义事件，宿主可以通过addEventListener监听：

  <script setup>
  const emit = defineEmits(['user-login'])
  // 触发事件
  emit('user-login', { userId: 123 })
  </script>
  

  宿主监听：

  document.querySelector('vue-embedded-app').addEventListener('user-login', (e) => {
    console.log('用户登录:', e.detail)
  })
  

三、替代方案：Vue插件模式（仅Vue宿主场景） #

如果你的嵌入场景都是Vue项目，直接开发成Vue插件会更简单，完全复用Vue生态：

// plugin.js
import App from './App.vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHashHistory } from 'vue-router'

export default {
  install(app, options) {
    // 初始化Pinia
    const pinia = createPinia()
    app.use(pinia)
    // 初始化路由
    const router = createRouter({
      history: createWebHashHistory(options.base || '/embedded-app'),
      routes: [/* 路由配置 */]
    })
    app.use(router)
    // 挂载到宿主指定节点
    return app.mount(options.target || '#embedded-app-container')
  }
}

宿主项目使用时：

// 宿主项目的main.js
import { createApp } from 'vue'
import EmbeddedAppPlugin from './path/to/plugin.js'

const app = createApp(App)
app.use(EmbeddedAppPlugin, {
  target: '#app-embed',
  base: '/my-app'
})
app.mount('#app')

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