Vue3跨库引用组件未正确解析、设计系统Navigation组件不渲染问题求助

你遇到的问题核心是多Vue实例隔离导致的组件解析失败，具体触发逻辑如下：

• 你的设计系统、公共包、业务应用三个包如果没有正确配置依赖规则，会在node_modules中生成多个独立的Vue副本，不同Vue实例的组件注册池、全局API完全隔离
• 公共包打包时如果未将Vue标记为外部依赖，会把独立的Vue runtime打包进公共包产物，和业务应用本身的Vue实例完全不互通
• 公共包内注册的Navigation组件是绑定到公共包自带的Vue实例上的，业务应用运行时用的是自己的Vue实例，无法解析公共包注册的组件，就会把<Navigation>当成原生HTML标签输出为小写的<navigation>，同时抛出resolveComponent can only be used in render() or setup()的警告——因为resolveComponent方法只能在当前实例的执行上下文中调用，跨实例调用就会触发该报错。

1. 统一依赖配置 #

在设计系统、公共包的package.json中，将vue从dependencies移到peerDependencies，强制上层业务应用统一提供Vue依赖，避免生成多个副本：

{
  "peerDependencies": {
    "vue": "^3.2.0"
  }
}

如果使用pnpm做包管理，可以在根目录.npmrc中添加配置把Vue提升到全局node_modules，保证所有包引用同一个Vue实例：

public-hoist-pattern[]=*vue*

如果出现多版本Vue共存的情况，可以在业务应用的package.json中添加resolutions配置强制锁定Vue版本：

{
  "resolutions": {
    "vue": "^3.3.0"
  }
}

2. 修正公共包构建配置 #

打包公共包时，必须将vue和@personal/design-system都标记为外部依赖，不要打包进公共包产物，以下是常见构建工具的配置示例：

Vite配置 #

// vite.config.js
export default {
  build: {
    lib: {
      entry: './src/index.js',
      name: 'CommonLib',
      fileName: 'common-lib'
    },
    rollupOptions: {
      // 标记为外部依赖，不打入产物
      external: ['vue', '@personal/design-system'],
      output: {
        globals: {
          vue: 'Vue',
          '@personal/design-system': 'PersonalDesignSystem'
        }
      }
    }
  }
}

Webpack配置 #

// webpack.config.js
module.exports = {
  externals: {
    vue: 'Vue',
    '@personal/design-system': 'PersonalDesignSystem'
  }
}

3. 优化组件注册逻辑 #

如果上述配置已生效，也可以调整组件注册方式规避resolveComponent调用的上下文问题，优先使用<script setup>语法糖，组件导入后自动注册，不需要手动配置components选项：

<script setup>
import { Navigation } from '@personal/design-system'
</script>
<template>
  <div class="template">
    <Navigation />
  </div>
</template>

4. 验证依赖树 #

配置完成后执行npm ls vue或者pnpm ls vue检查依赖树，确认整个项目中只有一个Vue版本，没有重复安装的副本即可。

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