记Vite打包时出现的报错解决:<script src=“xxx.js“> in “/index.html“ can‘t be bundled without type=“module“ attrib

本篇博客记录解决Vite打包时报错:

<script src="xxx.js"> in "/index.html" can't be bundled without type="module" attribute

xxx.css didn't resolve at build time, it will remain unchangel remain unchanged to be resolved at runtime

当我们通过标签<script> 引入js脚本代码时,出现:can't be bundled without type="module" attribute,报错大致意思是我们引入js文件时缺少了type='module'属性。

 关于标签<script>的属性type=‘module’,如果有疑惑,请看文章:在浏览器中使用javascript module(译) - 简书 (jianshu.com)

 如果你确实使用了JS的模块化,那么你直接加上type='module'属性基本就能够引入成功,解决报错。

但是,我并没有使用JS模块化,我就想直接引入,全局生效。

其实,问题出现在vite打包时文件访问路径的地方,也就是说,我们通过声明<script>或<link>标签引入静态资源时,引入的路径出现了问题,可能出现npm run dev可以正常运行,而npm run build时就会报错。

=== 解决 ===

我们可以看vite官网的描述

 

 ** 我们可以将静态资源放到根路径下的public目录中,然后通过/开头来引用public中的资源

 例如官网示例: 

通过/访问public中的静态资源,报错解决,打包正常。 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mao.O

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值