最近vue3+ts项目遇到一个问题,前端用nginx部署后,路由跳转报错。
要么就是xxx then is not a function,要么就是cannot find module… 开发环境一切正常。
之前vue2这样处理,但是现在直接报错…
component: (resolve) => require([`@/views/${view}`], resolve)
现在项目中是这样:
component: () => require(`@/views${_router.route}`)
但是抱歉,build后nginx部署,路由无法跳转。墙里墙外逛了一圈,没找到有效的解决方案?
没办法只能消耗HP来解决了,在经过一段时间的研究后,发现竟然用import没问题…这…也就是这样:
component: () => import(`@/views${_router.route}`)
最终的解决方案:
component: () => process.env.NODE_ENV === "development" ? require(`@/views${_router.route}`) : import(`@/views${_router.route}`)
最后补充一点,项目中动态添加路由的写法:
# routes 后端返回的路由集合
for (let route of routes) {
router.addRoute(route.parentName, route)
}