生产环境Vue3应用加载Vite开发插件时HMR异常求助

问题根源 #

主应用（生产模式）和插件的Vite开发环境完全独立，两者会分别计算生成scoped CSS的data-v哈希值、HMR的hmrId标识。当插件更新时，主应用无法识别插件端新生成的标识，导致scoped样式不生效、组件本身的HMR更新失败。

解决方案 #

1. 统一标识生成规则 #

在插件项目的vite.config.js中，配置与主应用一致的scoped CSS哈希前缀和HMR ID前缀，让两边生成的标识匹配：

// 插件项目 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      // 指定和主应用相同的HMR ID前缀
      hmrIdPrefix: 'my-main-app-'
    })
  ],
  css: {
    // 指定和主应用相同的scoped CSS哈希前缀
    scopedHashPrefix: 'my-main-app-'
  }
})

这样插件生成的data-v-xxx和HMR标识都会带上统一前缀，主应用就能正确识别插件的更新内容。

2. 手动触发主应用组件更新 #

由于主应用是生产模式，本身没有内置HMR机制，可在插件组件中监听HMR事件，主动通知主应用更新组件：

• 主应用先将实例挂载到全局：

// 主应用 main.js
const app = createApp(App)
// 挂载到全局供插件调用
window.__MAIN_APP_INSTANCE__ = app
app.use(plugin)
app.mount('#app')

• 插件组件中处理HMR更新：

<!-- 插件 PluginComponent.vue -->
<template>
  <div>Plugin</div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    if (newModule.default) {
      const mainApp = window.__MAIN_APP_INSTANCE__
      if (mainApp) {
        // 重新注册组件
        mainApp.component('PluginComponent', newModule.default)
        // 强制当前组件实例更新
        instance?.update()
      }
    }
  })
}
</script>

<style scoped>
div {
  background: yellow;
}
</style>

3. 改用远程组件加载方案 #

放弃插件install的方式，直接在主应用中用defineAsyncComponent加载插件组件，让Vite的HMR机制更直接地生效：

// 主应用 main.js
import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'

// 异步加载插件组件
const PluginComponent = defineAsyncComponent(() => 
  import('http://127.0.0.1:4173/src/PluginComponent.vue')
)

const app = createApp(App)
app.component('PluginComponent', PluginComponent)
app.mount('#app')

注意需要在插件的Vite配置中允许跨域：

// 插件项目 vite.config.js
export default defineConfig({
  server: {
    cors: true
  }
})

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