有没有办法先判断 vue 组件存不存在，再执行 import 语句？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 704 天前的主题，其中的信息可能已经有所发展或是发生改变。

假如有一段生成 vue 组件列表的代码：

const models = [
  {
    name: 'm1',
    component: () => import('./module1')
  },
  {
    name: 'm2',
    component: () =>import('./module2')
  }
  //...还有其它模块 m3 、m4 等
]

这段代码要在好几个项目中用到，而有的项目没有 m1 组件、有的没有 m2 组件，诸如此类，这在编译的时候会导致报错，请问该如何解决这个问题。

谢谢。

import

模块

component

name

6 条回复 • 2022-05-13 22:13:58 +08:00

murmur

2022-05-13 14:18:45 +08:00

vue 有自己的动态引用组件方式，不用自己拍脑子啊

murmur

2022-05-13 14:21:35 +08:00

不懂你说的什么意思，我的理解，如果你想让你的项目没有 m1 、m2 这样自由组合需要的东西，应该统一用一个脚手架，新建的时候不需要的组件就从引用里拿掉，而不是运行编译的时候去检查你有哪些

waiaan

2022-05-13 14:28:13 +08:00

@murmur
这个工程要在不同的项目里通过 npm 包的方式引用，工程里先预置好了不同项目中的 vue 组件，就是上面那段代码。

longxi

2022-05-13 14:28:40 +08:00

webpack: https://webpack.docschina.org/guides/dependency-management/#requirecontext
vite: https://cn.vitejs.dev/guide/features.html#glob-import

zhaol

2022-05-13 14:34:16 +08:00

@waiaan 那写成配置不就行了吗？这个工程写好不同项目的配置，通过 npm 引入，在使用的时候传参，如果是 a 项目，对应这个工程里面的 a 配置，b 对应 b 配置。
或者用 node 的 api ，读取 m1 组件的文件，有就 import ，没有就不 import

renmu123

2022-05-13 22:13:58 +08:00 via Android

没有的话不能删掉吗？