Vue3项目本地正常构建后报vue-router的l.then is not a function错误如何解决？

问题原因 #

你的路由懒加载写法不符合Vue Router 4的规范：

• /dashboard路由的组件使用了CommonJS同步require()语法：() => require("../views/DashboardView.vue")
• Vue Router 4要求懒加载组件必须返回Promise，开发环境下webpack会临时把require()包装成Promise，但生产构建后该处理失效，导致vue-router调用.then()时触发类型错误。

修复方案 #

将所有使用require()的路由懒加载写法替换为ES模块的动态import()（天然返回Promise）：

修改Router.js中的对应代码：

// 原代码
component: () => require("../views/DashboardView.vue"),

// 修改后
component: () => import("../views/DashboardView.vue"),

如果还有其他类似的懒加载路由，全部按此方式替换。

验证 #

重新执行构建命令，运行生产环境代码，该报错即可解决。

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