vite中使用import动态导入组件时，千万不要随便导入路径

事故

起因是项目在经过本地调试一切正常后，上测试环境时，无法打开目标弹窗，提示:Failed to fetch dynamically imported module xxx.vue

我的项目目录结构(事故发生地)：

views
 --dome
   --customDialog.vue
   --a.vue
   --b.vue
   ...

在customDialog.vue有这么一段代码

// 所有的自定义弹窗都会走这里 `camelCaseName` 是变量 值可能是a 也可能是b 刚好对应上同级目录下的a.vue和b.vue等等其他文件
const componentModule = await import(`./${camelCaseName}.vue`);

解决方案

直接说结论，动态导入时 不能直接 在./后面跟变量也就是${camelCaseName} ，需要改成

const componentModule = await import(`../dome/${camelCaseName}.vue`);

重新打开npm run vite 部署 完美解决

原因

起初一直以为是相对路径导致的，先试图通过设置@修改成绝对路径，这也是AI和百度的解决方案，但会直接连项目都启动不了，最后在终端的提示中给出了一段地址 就是这个

部分截图(重点)

简单来说vite打包依赖于Rollup，而上面这份链接就是Rollup动态导入变量的规范文件，那么就简单了，照着它的规范导入就行了，它不支持import('./${abc}.vue'),那我在前面加一层路径就好了import('../dome/${abc}.vue')

build 启动！