vite创建vue3项目页面引用public下js文件失败解决办法
问题出现
情景描述：
在将html页面转到vite构建的vue3项目页面时内容和样式已经正确引入，（引入前将html页面的静态资源全部放到了public静态资源下）但是js文件在vue页面引入时报各种错，解决这个出现那个
原因查询：
基于此情况我阅读了vite官方文档发现：public 中的资源不应该被 JavaScript 文件引用也就是说在vue3页面的script中不能使用import导入public下的静态js文件
为什么不能这样导入？
因为你在 Vue 3 的 <script setup> 区块中使用了导入的 JavaScript 库，但是这些库可能不是以模块化方式编写的，无法直接与 Vue 组件进行交互。
在 Vue 3 中，<script setup> 区块将组件逻辑放在单个区块中，自动推断变量和组件选项，并且默认开启了类似于模块化的模式。然而，一些旧的 JavaScript 库可能不符合这种模块化规范，无法直接与 Vue 组件配合使用。
解决这个问题的方法之一是将这些不兼容的 JavaScript 库作为全局变量引入，而不是在 <script setup> 中使用 import 导入。可以在 index.html 中使用 <script> 标签手动引入这些库，从而使它们成为全局可用的变量。
最终目标：
在页面中使用 public 文件夹下的 JavaScript 文件
问题解决（全局引用）
在 index.html 入口文件中通过 <script> 标签手动引入静态 JS 文件。这样，该文件将被全局引用，可以在整个应用程序中访问它
<!DOCTYPE html> <html> <head> <!-- head 部分代码 --> </head> <body> <!-- body 部分代码 --> <!-- 引入其他资源 --> <!-- 手动引入的 JavaScript 库 --> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.bundle.min.js"></script> <script src="/path/to/lightbox.min.js"></script> </body> </html>
注意：确保使用正确的路径来引入这些库文件，路径应该是相对于你的项目根目录来指定的。
保存文件并重新启动开发服务器。现在，这些 JavaScript 库将在应用程序加载时被引入，并可在整个 Vue 3 应用程序中使用。
总结
到此这篇关于vite创建vue3项目页面引用public下js文件失败解决办法的文章就介绍到这了,更多相关vite创建vue3引用js文件失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-10-10
这篇文章主要介绍了使用el-table做成树形结构并解决数据驱动视图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
使用element-ui设置table组件宽度(width)为百分比
这篇文章主要介绍了使用element-ui设置table组件宽度(width)为百分比方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue的三种路由模式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了Vue中使用h5 Plus的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于实现Vue3版抖音滑动插件踩坑指南,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
今天小编就为大家分享一篇关于Vue唯一可以更改vuex实例中state数据状态的属性对象，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
本文是脚本之家小编给大家整理的vue组件传值几种常用方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要为大家详细介绍了vue实现移动端图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最近小编接到一个项目，需要在浏览器的ide中支持自定义提示功能，接下来通过本文给大家介绍在vue中实现Monaco Editor自定义提示功能,需要的朋友可以参考下2019-07-07
最新评论