如何从服务器加载Vue异步组件？

第一步：在项目1中构建独立可分发的组件 #

要让组件能被外部加载，需将其打包为UMD格式（兼容浏览器、CommonJS等多种运行环境），具体操作如下：

• 配置项目打包脚本：
  以Vue3 + Vite为例，修改vite.config.js指定库模式打包：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      lib: {
        entry: 'src/components/TargetComponent.vue', // 目标组件的入口文件路径
        name: 'TargetComponent', // 组件暴露到全局的变量名
        fileName: (format) => `target-component.${format}.js`
      },
      rollupOptions: {
        external: ['vue'], // 排除Vue依赖，由加载组件的项目提供
        output: {
          globals: {
            vue: 'Vue' // 全局环境中Vue的变量名
          }
        }
      }
    }
  })
  

• 执行打包：运行npm run build，打包完成后将dist目录下的UMD格式文件部署到服务器静态资源目录。

第二步：在项目2中运行时加载外部组件 #

有两种常用的动态加载方式，可根据实际场景选择：

方式1：动态创建script标签加载 #

// 封装加载函数
async function loadExternalComponent(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = url
    script.onload = () => {
      // 取打包时定义的全局变量名获取组件
      const Component = window.TargetComponent
      resolve(Component)
    }
    script.onerror = reject
    document.body.appendChild(script)
  })
}

// 在Vue组件中使用
export default {
  components: {
    // 异步注册组件
    TargetComponent: () => loadExternalComponent('http://你的服务器地址/target-component.umd.js')
  },
  // 或在setup中动态注册
  async setup() {
    const TargetComponent = await loadExternalComponent('http://你的服务器地址/target-component.umd.js')
    return { TargetComponent }
  }
}

方式2：使用import()动态导入（需配置CORS） #

若服务器配置了CORS允许项目2域名访问，可直接用动态import：

// 直接导入服务器上的组件文件
const TargetComponent = () => import('http://你的服务器地址/target-component.es.js')

// 在组件中注册使用
export default {
  components: {
    TargetComponent
  }
}

注意事项 #

• 确保项目1和项目2的Vue版本一致，避免版本冲突导致兼容性问题。
• 服务器需配置正确的静态资源访问权限，尤其是CORS规则，防止跨域报错。
• 若组件包含独立样式，打包时需单独提取样式文件，项目2加载组件后需通过动态创建link标签引入对应样式。

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