Vite项目如何异步导入未知Vue组件并共享运行时依赖

1. 在主项目中添加导入映射（Import Maps） #

在主项目的入口HTML文件（比如ui/index.html）中添加importmap脚本，为vue模块指定加载路径，让浏览器能解析插件组件里的import { ... } from 'vue'语句。

开发环境配置 #

直接指向node_modules中的Vue ES模块：

<script type="importmap">
{
  "imports": {
    "vue": "/node_modules/vue/dist/vue.esm-browser.js"
  }
}
</script>

生产环境配置 #

先修改主项目Vite配置，把Vue打包成独立chunk：

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [vue()],
    root: 'ui',
    build: {
        outDir: '../dist',
        rollupOptions: {
            output: {
                // 将Vue拆分为单独的chunk文件
                manualChunks: {
                    vue: ['vue']
                }
            }
        }
    },
})

再在生产环境的HTML中添加导入映射，指向打包后的Vue chunk：

<script type="importmap">
{
  "imports": {
    "vue": "/vue.js"
  }
}
</script>

2. 调整插件组件的构建配置 #

根据需求选择输出ES模块或UMD格式，确保能正确复用主项目的Vue：

选项一：输出ES模块（推荐） #

修改插件Vite配置，明确输出ES格式，保留Vue为外部依赖：

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: './resources',
        lib: {
            entry: resolve(__dirname, 'ui/index.js'),
            fileName: 'ui-example',
            formats: ['es'] // 仅输出ES模块
        },
        rollupOptions: {
            external: ['vue']
        }
    },
})

选项二：输出UMD格式 #

若需兼容旧环境，可输出UMD格式直接使用全局Vue变量：

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: './resources',
        lib: {
            entry: resolve(__dirname, 'ui/index.js'),
            name: 'UIExample',
            fileName: 'ui-example',
            formats: ['umd']
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue'
                }
            }
        }
    },
})

此时需用动态加载脚本的方式导入UMD插件：

async function loadUMDPlugin(pluginName) {
    return new Promise((resolve) => {
        const script = document.createElement('script')
        script.src = `plugins/${pluginName}.umd.js`
        script.onload = () => {
            resolve(window.UIExample)
            script.remove()
        }
        document.head.appendChild(script)
    })
}

const component = await loadUMDPlugin(plugin.src.name)

3. 验证异步导入路径 #

确保导入路径正确，比如插件放在主项目部署根目录的plugins文件夹下时，路径应为/plugins/${plugin.src.name}.mjs（使用绝对路径避免相对路径混乱）。

• 导入映射是浏览器原生特性，解决裸模块（如import 'vue'）无法被浏览器识别的问题。
• 将Vue拆分为独立chunk，保证主项目和插件复用同一个Vue实例，避免版本冲突与重复加载。
• 插件构建时将Vue设为外部依赖，大幅减小插件包体积，同时复用主项目已加载的Vue资源。

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