vue3创建路由时Failed to fetch dynamically imported module如何解决
时间: 2023-07-19 08:33:22 浏览: 210
Vue Router 实现动态路由和常见问题及解决方法
5星 · 资源好评率100%
这个问题通常是由于 Webpack 的代码分割(code splitting)机制导致的。在 Vue 3 中,使用动态导入的方式来加载异步组件时,Webpack 会把这些组件分割成多个代码块(chunk),然后按需加载。
解决这个问题的方法是在 Webpack 的配置文件中进行配置,让 Webpack 输出的代码块能够正确被服务器或 CDN 加载。具体的做法如下:
1. 在 Webpack 的配置文件中添加以下配置:
```
output: {
publicPath: '/'
}
```
这个配置告诉 Webpack 输出的代码块的静态资源路径是根路径,这样就能够保证这些代码块能够正确被服务器或 CDN 加载。
2. 如果你使用的是 Vue CLI,可以在 `vue.config.js` 文件中添加以下配置:
```
module.exports = {
publicPath: '/'
}
```
这个配置告诉 Vue CLI 输出的静态资源路径是根路径,同样能够保证代码块能够正确被加载。
通过以上配置,你应该就能够解决 `Failed to fetch dynamically imported module` 的问题了。
阅读全文