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 文件。这样,该文件将被全局引用,可以在整个应用程序中访问它

html 复制代码
<!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>
  1. 注意:确保使用正确的路径来引入这些库文件,路径应该是相对于你的项目根目录来指定的。

  2. 保存文件并重新启动开发服务器。现在,这些 JavaScript 库将在应用程序加载时被引入,并可在整个 Vue 3 应用程序中使用。

相关推荐
开开心心就好25 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享26 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js