使用Vite构建Vue组件库后组件响应式失效问题排查

问题场景 #

使用Vite构建Vue 3组件库，在通过Vue CDN（ES模块版本）的项目中，通过importmap引入后，组件内的响应式数据（如count、text）无法更新，但页面中直接创建的Vue实例（#lala）响应式正常。

相关代码 #

引入组件的页面代码 #

<!-- 补充缺失的importmap配置 -->
<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>

<div id="appvue"></div>

<div id="lala"> 
  <div @click="counter++">
    {{counter}}
   </div>
</div>
                            
<link rel="stylesheet" href="/static/js/vue/style.css" type="text/css" />
                     
<script type="module">
    import { createApp, ref } from 'vue'
    import { MyComponent } from '/static/js/vue/index.js';
                    
    createApp(MyComponent).mount('#appvue')
              
    createApp({
        setup() {
            const counter = ref(0)
            return {
              counter
            }
        }
    }).mount('#lala');
</script>

组件代码MyComponent.vue #

<template>
    hallo
  <button @click="count++">Du hast {{ count }} mal geklickt</button>
  <div class="message">Hier ist die message: {{message}}</div>
  <div>test</div>
  <input v-model="text">
</template>

<script>
import {ref} from "vue";

export default {
    setup()
    {
        const count = ref(0);
        const text = ref("ändere mich");

        const message = ref("hallo");

        return {
            count,
            message,
            text
        };
    }
};
</script>

<style>
div{
  font-size: 20px;
}

.message{
  font-weight: bold;
  color: mediumvioletred;
}
</style>

入口文件main.ts #

import MyComponent from "@/components/MyComponent.vue"
export { MyComponent }

Vite配置文件 #

import {fileURLToPath, URL} from "url"
import {defineConfig, loadEnv} from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig(({ mode }) =>
{
    const env = loadEnv(mode, process.cwd(), "");
    return {
        plugins: [vue()],
        root: "frontend",
        resolve: {
            alias: {
                "@": fileURLToPath(new URL("./frontend/src", import.meta.url))
            }
        },
        server: {
            port: 3000,
        },
        build: {
            lib: {
                entry: "./src/main.ts",
                formats: ["es", "cjs"],
                fileName: format => (format == "es" ? "index.js" : "index.cjs")
            },
            rollupOptions: {
                external: ["vue"],
                output: {
                    globals: {
                        vue: "Vue",
                    },
                },
            }
        },
        define: {
            "process.env": env
        },
        test: {
            globals: true,
            environment: "jsdom",
            reporters: "junit",
            outputFile: "../build/reports/vitest/vitest.xml"
        }
    }
})

原因分析 #

核心问题是存在两个独立的Vue模块实例：

• 页面通过importmap引入的Vue是一个全局模块实例；
• 原页面缺失importmap配置，导致浏览器无法解析组件库中的import 'vue'语句，可能自动加载其他版本的Vue，形成实例冲突；
• Vue的响应式系统依赖同一实例内的API（如ref、reactive），不同实例的API创建的响应式对象无法被当前页面的Vue实例追踪更新，最终导致组件响应式失效。

解决方案 #

1. 补充页面的importmap配置 #

在页面头部添加importmap标签，明确将vue映射到CDN的ES模块地址，确保组件库和页面使用同一个Vue实例：

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>

2. 验证Vite构建配置的正确性 #

确保build.rollupOptions.external包含vue，避免组件库构建时将Vue打包进去，保留import语句依赖页面提供的Vue模块：

// Vite配置中的build部分
build: {
    lib: {
        entry: "./src/main.ts",
        formats: ["es", "cjs"],
        fileName: format => (format == "es" ? "index.js" : "index.cjs")
    },
    rollupOptions: {
        external: ["vue"], // 必须保留，禁止打包Vue进组件库
        output: {
            globals: {
                vue: "Vue", // 对UMD/CJS格式生效，ES格式依赖importmap
            },
        },
    }
}

3. 重新构建组件库 #

执行构建命令：

npm run build

检查构建后的index.js文件，应保留对Vue的import语句，示例如下：

import { ref as e } from "vue";
// ...组件相关代码

4. 验证浏览器加载情况 #

打开页面，通过开发者工具的网络面板确认：仅加载了一次Vue（来自配置的CDN地址），无额外的Vue请求。

完成以上步骤后，组件内的响应式数据即可正常更新。

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