记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“ 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官网的描述:

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

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

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

 例如官网示例: 

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

通过/访问public中的静态资源,报错解决,打包正常。 文章来源地址https://www.toymoban.com/news/detail-723822.html

到了这里,关于记Vite打包时出现的报错解决:<script src=“xxx.js“> in “/index.html“ can‘t be bundled without type=“module“ attrib的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决:django设置DEBUG=false时出现的问题

    首先,我用的是django4.2,python3.10版本 本来,如果在settings.py中使用 DEBUG = True,那么什么问题也没有,当然,这属于调试模式。 一切正常..... 但是,当我准备提交代码时,将 DEBUG 改为 False 时..... 好好的admin界面,变成了这样.... 而且,好好的静态资源,也没法访问了:  郁闷

    2024年02月13日
    浏览(36)
  • Navicat连接MySQL时出现的连接失败--解决方法

    一、安装MySQL的注意事项 官网下载安装,选择zip包,解压后不用安装 只用配置好环境变量Path 并在解压后的文件夹里新建文本文档my.ini,编辑如下内容 需要修改的地方是安装目录(自己的)和数据存放目录(自己的) 详细安装过程可以借鉴这个文章 mysql8.0.25安装配置教程(

    2024年02月04日
    浏览(41)
  • Vdbench:解决运行时出现的常见问题记录1

     一、Vdbench报错,如:Waiting for slave connection: localhost-5 1、运行vdbench遇到以下类似情况,一般为配置DNS问题 ​编辑         2、打开vi /etc/resolv.conf,将配置的DNS注释掉即可 注:远程ssh出现连接响应慢的问题,一般也是配置了DNS所导致的   ​

    2024年02月09日
    浏览(41)
  • 解决Jackson解析JSON时出现的Illegal Character错误

    🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言

    2024年02月10日
    浏览(43)
  • 解决Python安装库时出现的Requirement already satisfied问题

    uirement already satisfied 的问题当我们用 pip install + 库名 时,出现了下面 Requirement already satisfied WARNING: Ignoring invalid distribution -ip  的问题 对于这样的问题,解决办法就是在 pip install 后加 - -target=你所要添加的库文件地址(注意:target前为两个-,并且没有空格) 再加 库名 一般来说

    2024年01月19日
    浏览(38)
  • 自己在使用cmd安装playWright时出现的error及其解决方法

    按照正常的流程步骤安装Playwright; 要使用 Playwright,需要 Python 3.7 版本及以上,请确保 Python 的版本符合要求。 pip install playwright 安装Playwright自动化测试框架 playwright install         安装Playwright浏览器驱动程序:自动安装Chromium、Firefox和WebKit浏览器(下载的时间可能会有

    2024年02月12日
    浏览(43)
  • 解决OBS同时录制电脑音频和人声时出现的声音不同步问题

    在obs同时录制电脑声音和人声时,比如在 唱歌 、 配音 时,录制的结果人声有明显的延迟,大约0.5-1秒左右的样子 麦克风 - 高级音频属性 调整麦克风的同步偏移,通常是人声有延迟,用负数表示提前多少毫秒,需要多次尝试确定真正的延迟时间 注: 这是目前唯一的一个人声

    2024年02月12日
    浏览(46)
  • 解决MAC M1处理器运行Android protoc时出现的错误

    Protobuf是Google开发的一种新的结构化数据存储格式,一般用于结构化数据的序列化,也就是我们常说的数据序列化。这个序列化协议非常轻量级和高效,并且是跨平台的。目前,它支持多种主流语言,比传统的XML、JSON等方法更具优势。详细信息请参考:Google protocol buffer。但是

    2024年02月14日
    浏览(30)
  • [vue3打包时出现的问题]File ‘xxx‘ is a JavaScript file. Did you mean to enable the ‘allowJs‘ option?

     今天在打包vue3+ts的项目是遇到了一个错误信息:is a JavaScript file. Did you mean to enable the \\\'allowJs\\\' option? (是一个javaScript文件。你是否要启用‘allowJs选项?’)错误信息如下: 查了一下说是由于我们的项目配置中缺少了‘allowJs’选项导致的。当我们在使用TypeScript编辑器编译项

    2024年03月23日
    浏览(42)
  • Mysql8.0.16安装时出现的Database initialization failed解决方法

    开发工具与关键技术: mysql 撰写时间:2022/9/28 首先说明:笔者在安装第一次的时候就出现以下问题,拿虚拟机安装的时候,同样的步骤,安装成功。主机使用zip安装包安装的时候也可以安装,但会出现一个Can‘t connect to MySQL server on ‘localhost:3306‘ (10061)的bug,如果你也有这个

    2024年02月05日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包