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

最新推荐文章于 2024-01-24 10:11:57 发布

turbo夏日漱石

最新推荐文章于 2024-01-24 10:11:57 发布

阅读量3.1k

点赞数 1

分类专栏：项目过程中的问题 vue 前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_62799214/article/details/132845147

版权

前端同时被 3 个专栏收录

46 篇文章 1 订阅

订阅专栏

项目过程中的问题

33 篇文章 0 订阅

订阅专栏

vue

33 篇文章 0 订阅

订阅专栏

问题出现

情景描述：

在将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>
<body>
  

  

  
  <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 应用程序中使用。