如何在Vue.js中实现多组件的条件化批量动态导入

问题核心原因 #

• ES Module 的静态 import * as xx from 'xxx' 语法只能在模块顶层作用域使用，属于编译阶段执行的逻辑，不能放在 if 分支、函数等运行时逻辑块中，所以你原来的条件写法直接会报语法错误。
• 动态 import() 语法本身返回 Promise，不需要加 * as components 后缀，Promise 回调拿到的结果就是等价于 import * as xx 得到的模块导出对象。

可行实现方案 #

方案1：运行时动态批量注册（适配你当前判断window.ipcRenderer的运行时场景） #

直接用动态import加载对应模块，拿到导出对象后注册到Vue组件中：

const IPC = window.ipcRenderer
let components = {}

// 加载组件方法
const loadTargetComponents = async () => {
  const module = IPC 
    ? await import('@/components/electronIndex') 
    : await import('@/components/index')
  components = module
}

// 选项式API示例
export default {
  async created() {
    await loadTargetComponents()
    // 批量注册所有导入的组件
    Object.entries(components).forEach(([compName, comp]) => {
      this.$options.components[compName] = comp
    })
  }
}

// Vue3 组合式API示例
/*
<script setup>
await loadTargetComponents()
</script>
<template>
  <!-- 直接使用即可，不需要手动注册 -->
  <one />
  <two />
</template>
*/

方案2：构建时静态条件导入（性能更优，适合打包时就能区分环境的场景） #

如果你的项目打包时可以区分Electron环境和普通Web环境，可以用构建工具的环境变量做静态条件判断，打包时会自动剔除不需要的分支，不需要运行时异步加载：

// Vite 环境示例，webpack 对应改为 process.env 即可
let components
if (import.meta.env.VITE_RUNTIME === 'electron') {
  components = require('@/components/electronIndex')
} else {
  components = require('@/components/index')
}

export default {
  components: {
    ...components
  }
}

方案3：直接用构建工具的glob批量导入（不需要维护index.js导出列表） #

如果不想每次新增组件都手动修改index.js的导出配置，可以直接用glob匹配文件批量导入，彻底省去维护导出列表的工作：

const IPC = window.ipcRenderer
// 匹配对应目录下所有vue文件
const compModules = import.meta.glob(
  IPC ? '@/components/electron/*.vue' : '@/components/*.vue',
  { import: 'default', eager: true }
)
// 批量转换为 组件名: 组件对象 的格式
const components = Object.fromEntries(
  Object.entries(compModules).map(([filePath, comp]) => {
    // 从文件路径提取组件名，例如 ./One.vue 转为 one
    const compName = filePath.match(/\/([^/]+)\.vue$/)[1].toLowerCase()
    return [compName, comp]
  })
)

export default {
  components
}

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