vite創(chuàng)建vue3項目頁面引用public下js文件失敗解決辦法

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

Vue3相較于之前的版本有了不少變化,如引用全局Js文件,這篇文章主要給大家介紹了關于vite創(chuàng)建vue3項目頁面引用public下js文件失敗的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

問題出現

情景描述：

在將html頁面轉到vite構建的vue3項目頁面時內容和樣式已經正確引入，（引入前將html頁面的靜態(tài)資源全部放到了public靜態(tài)資源下）但是js文件在vue頁面引入時報各種錯，解決這個出現那個

原因查詢：

基于此情況我閱讀了vite官方文檔發(fā)現：public 中的資源不應該被 JavaScript 文件引用也就是說在vue3頁面的script中不能使用import導入public下的靜態(tài)js文件

為什么不能這樣導入？

因為你在 Vue 3 的 <script setup> 區(qū)塊中使用了導入的 JavaScript 庫，但是這些庫可能不是以模塊化方式編寫的，無法直接與 Vue 組件進行交互。

在 Vue 3 中，<script setup> 區(qū)塊將組件邏輯放在單個區(qū)塊中，自動推斷變量和組件選項，并且默認開啟了類似于模塊化的模式。然而，一些舊的 JavaScript 庫可能不符合這種模塊化規(guī)范，無法直接與 Vue 組件配合使用。

解決這個問題的方法之一是將這些不兼容的 JavaScript 庫作為全局變量引入，而不是在 <script setup> 中使用 import 導入。可以在 index.html 中使用 <script> 標簽手動引入這些庫，從而使它們成為全局可用的變量。

最終目標：

在頁面中使用 public 文件夾下的 JavaScript 文件

問題解決（全局引用）

在 index.html 入口文件中通過 <script> 標簽手動引入靜態(tài) 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>

注意：確保使用正確的路徑來引入這些庫文件，路徑應該是相對于你的項目根目錄來指定的。

保存文件并重新啟動開發(fā)服務器?，F在，這些 JavaScript 庫將在應用程序加載時被引入，并可在整個 Vue 3 應用程序中使用。