vite-plugin-vue
vite-plugin-vue copied to clipboard
vite build打包以后报错Failed to fetch dynamically imported module
Describe the bug
这是我的demo目录结构:
.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── App.vue
│ ├── components
│ │ └── ElStyle.css
│ ├── main.ts
│ ├── pages
│ │ ├── index
│ │ │ └── index.vue
│ │ ├── pagea
│ │ │ └── index.vue
│ │ └── pageb
│ │ └── index.vue
│ ├── route.ts
│ ├── style.css
│ └── vite-env.d.ts
└── vite.config.ts
在pagea和pageb都导入了ElStyle.css文件并在控制台打印出来(模拟例如打印时注入css等场景)。
在dev下没有任何问题,但是打包以后执行会报错Failed to fetch dynamically imported module。
自己经过反复测试以后,得到如下结果(a页面和b页面代码相同):
- 报错Failed to fetch dynamically imported module
import ElStyle from "../../components/ElStyle.css
export default {
async mounted() {
console.log(ElStyle)
}
}
- 报错Failed to fetch dynamically imported module
const ElStyle = import.meta.glob("../../components/ElStyle.css", { eager: true })
export default {
async mounted() {
console.log(ElStyle)
const keys = Object.keys(ElStyle)
console.log((ElStyle[keys[0]] as any).default)
}
}
- 不报错,但是在
then中返回{}
const ElStyle = import.meta.glob("../../components/ElStyle.css")
export default {
async mounted() {
console.log("b page....")
console.log(ElStyle)
const keys = Object.keys(ElStyle)
console.log(ElStyle[keys[0]])
ElStyle[keys[0]]().then((data: any) => {
console.log(data)
})
}
}

最后:
1.如果只在a文件或者b文件只执行一次这种操作,打包后可以正常运行,如果出现两个地方在导入同一个资源,则会出现报错。
2.在route.ts中不使用异步导入则可以正常运行,比如:
import PageA from "./pages/pagea/index.vue"
import PageB from "./pages/pageb/index.vue"
const routes = [
{
path: "/",
component: () => import("./pages/index/index.vue")
},
{
path: "/a",
component: PageA
},
{
path: "/b",
component: PageB
}
]
Reproduction
https://github.com/miiiku/vite-build-demo
Steps to reproduce
Run npm i, npm build
本地启动一个http服务,访问并点击pagea或者pageb查看控制台
System Info
npx: installed 1 in 2.779s
System:
OS: macOS 13.0.1
CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Memory: 56.61 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.19.3 - /usr/local/opt/node@14/bin/node
npm: 6.14.17 - /usr/local/opt/node@14/bin/npm
Browsers:
Safari: 16.1
npmPackages:
@vitejs/plugin-vue: ^3.2.0 => 3.2.0
vite: ^3.2.3 => 3.2.4
Used Package Manager
npm
Logs
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
我也遇到了,我是提示TypeError: Failed to fetch dynamically imported module:https://www.xxxx.js找不到,但是我直接访问https://www.xxxx.js,可以访问到这个js
我解决了,我的router里除了/home路径外,都是懒加载,然后随便选一个页面组件改为正常组件加载(非懒加载),然后其他路由全都ok了。不知道原理
这应该是 vite 的问题,但 vite 5 中已经移除了这种用法。
我试了改为
ElStyle.module.css 打包后正常工作。