构建可运行时加载的Vue单组件.mjs库？解决Vuetify注入错误

一、修复Vue响应式警告问题 #

警告原因：异步导入的组件被Vue自动转为响应式对象，而组件本身无需响应式处理。

解决方法：使用markRaw包裹异步组件，阻止Vue将其转为响应式对象：

<script setup>
import { markRaw, defineAsyncComponent } from 'vue'

// 用markRaw包裹异步导入的组件
const Renderer = markRaw(defineAsyncComponent(() => import('./Renderer.mjs')))
</script>

<template>
  <Renderer />
</template>

二、修复Vuetify注入缺失错误 #

错误原因：打包后的组件无法获取Vuetify的全局注入上下文，需根据使用场景选择以下两种方案：

方案1：组件独立打包Vuetify（不依赖消费项目的Vuetify） #

适合组件需要完全独立运行的场景，将Vuetify打包进组件内部并手动提供注入：

1. 修改组件入口文件src/index.ts：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import Renderer from './Renderer.vue'
import { h } from 'vue'

// 创建独立的Vuetify实例
const vuetify = createVuetify({
  components,
  directives,
})

// 封装组件并提供Vuetify注入
export default {
  name: 'WrappedRenderer',
  setup() {
    return () => h(Renderer)
  },
  // 传递Vuetify的注入项
  provide: vuetify.provide,
}

2. 调整vite.config.ts，仅将vue设为外部依赖：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineConfig({
  plugins: [vue(), vuetify({ autoImport: true }), cssInjectedByJsPlugin()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'Renderer',
      fileName: 'renderer',
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: { vue: 'Vue' }
      }
    }
  }
})

方案2：依赖消费项目的Vuetify上下文 #

适合消费项目已集成Vuetify的场景，将Vuetify设为外部依赖，确保组件在Vuetify上下文内渲染：

1. 修改vite.config.ts，添加Vuetify相关依赖到external：

rollupOptions: {
  external: ['vue', 'vuetify', 'vuetify/components', 'vuetify/directives'],
  output: {
    globals: {
      vue: 'Vue',
      vuetify: 'Vuetify'
    }
  }
}

2. 消费项目中确保组件在Vuetify上下文内渲染：

<!-- 消费项目的App.vue -->
<script setup>
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { markRaw, defineAsyncComponent } from 'vue'
import 'vuetify/styles'

const vuetify = createVuetify({ components, directives })
const Renderer = markRaw(defineAsyncComponent(() => import('./Renderer.mjs')))
</script>

<template>
  <!-- 在v-app内渲染组件，确保继承Vuetify上下文 -->
  <v-app>
    <Renderer />
  </v-app>
</template>

补充：package.json导出配置 #

确保组件打包后能被正确识别：

{
  "name": "renderer-component",
  "type": "module",
  "exports": {
    ".": "./dist/renderer.mjs"
  }
}

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