用vue构建web-components组件库，输出dist时，如果没有将vue外部化，那么其他vue项目引入时，会破坏热更新。

[xinnian999]

Vue version

3.5.13

Link to minimal reproduction

https://github.com/xinnian999/arto-ui

Steps to reproduce

pnpm i
pnpm build 用vite+vue构建web-components组件库（这一步并没有外部化vue）
pnpm dev 运行一个vue项目并引入了上一步构建的dist

这时候修改play/vue下的代码，热更新会失效

What is expected?

期望即使我将vue构建到了组件库dist里，别人引入我的组件库也不会破坏vue的热更新

What is actually happening?

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Xeon(R) Gold 6234 CPU @ 3.30GHz
    Memory: 13.60 GB / 31.65 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (129.0.2792.89)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

No response

[edison1105]

可能是组件库包含 vue 会导致项目里面的 VUE_HMR_RUNTIME 被覆盖，引起 HMR 失效。

[xinnian999]

可能是组件库包含 vue 会导致项目里面的 VUE_HMR_RUNTIME 被覆盖，引起 HMR 失效。

原来是这样。

但我开发web-components组件库，这个需要依赖vue。为了方便其他框架引入使用，才需要把vue打进组件库。否则别人需要同时导入我的组件库和vue包

这个有什么好的解决办法吗？大佬

[xinnian999]

我暂时通过输出两个版本，一个外部化vue，一个非外部化vue解决了。

希望vue团队能修复这个问题，感谢

[edison1105]

a workaround

export default defineConfig(({ command }) => {
  const config: UserConfig = {
    // the existing config
  };

  if (command === 'build') {
    config.define = {
      ...config.define,
      // trim Vue HMR code
      'process.env.NODE_ENV': JSON.stringify('production') 
    };
  } 

  return config;
});

[xinnian999]

牛的，大佬！完美解决

[xinnian999]

可以这么理解吗， 大佬：
默认打包会把 dev 版 Vue runtime 构建进去，
在 Vue 项目中使用该组件库时，会和项目的 dev 版 Vue 混用，从而破坏热更新。
所以这里强制设置为 production 模式，让构建时使用 prod 版 Vue，避免副作用。

[edison1105]

可以这么理解吗， 大佬：
默认打包会把 dev 版 Vue runtime 构建进去，
在 Vue 项目中使用该组件库时，会和项目的 dev 版 Vue 混用，从而破坏热更新。
所以这里强制设置为 production 模式，让构建时使用 prod 版 Vue，避免副作用。

true