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文件失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中同步方法的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
现在,很多登陆表单都会使用密码加密,为登录安全,登录表单输入密码,会加密后传入后台,本文就来介绍一下Vue3实现密码加密登录的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
vue3的setup语法如何自定义v-model为公用hooks
这篇文章主要介绍了vue3的setup语法如何自定义v-model为公用hooks，文章分为两个部分介绍，简单介绍vue3的setup语法如何自定义v-model和如何提取v-model语法作为一个公用hooks2022-07-07
这篇文章介绍了vue.js实现开关(switch)组件的实例代码，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)
本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要为大家详细介绍了基于Vue3和antDesignVue实现表单校验的方法,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解下2024-01-01
vue-cli使用stimulsoft.reports.js的详细教程
Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计，编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,下面这篇文章主要给大家介绍了关于vue3和ts封装axios以及使用mock.js的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了vue移动端实现手机左右滑动入场动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要介绍了antd vue table表格内容如何格式化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
最新评论