vite创建vue3项目页面引用public下js文件失败解决办法

更新时间：2023年11月09日 08:56:34 作者：turbo夏日漱石

Vue3相较于之前的版本有了不少变化,如引用全局Js文件,这篇文章主要给大家介绍了关于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+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
这篇文章主要介绍了vue+echarts+datav大屏数据展示及实现中国地图省市县下钻,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
浅谈vue加载优化策略
这篇文章主要介绍了浅谈vue加载优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Vue中设置背景图片和透明度的简单方法
在做项目的时候常需要设置背景图片和透明度,下面这篇文章主要给大家介绍了关于Vue中设置背景图片和透明度的简单方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
Vue发送ajax请求方法介绍
这篇文章介绍了Vue发送ajax请求的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-01-01
页面tooltip组件限制工具函数使用示例详解
这篇文章主要为大家介绍了页面tooltip组件的限制工具函数使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
vue在线动态切换主题色方案
这篇文章主要介绍了vue在线动态切换主题色方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue中如何去掉input前后的空格
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
详解VUE 定义全局变量的几种实现方式
本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解
最近领导提了一个新需求:仿照e签宝,实现pdf电子签章,本文给大家介绍vue使用pdfjs-dist+fabric实现pdf电子签章的思路,感兴趣的朋友一起看看吧
2023-12-12
利用Vue+intro.js实现页面新手引导流程功能
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下
2023-11-11