快捷導(dǎo)航

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

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

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

問題出現(xiàn)

情景描述：

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

原因查詢：

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

為什么不能這樣導(dǎo)入？

因?yàn)槟阍?Vue 3 的 <script setup> 區(qū)塊中使用了導(dǎo)入的 JavaScript 庫，但是這些庫可能不是以模塊化方式編寫的，無法直接與 Vue 組件進(jìn)行交互。

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

解決這個(gè)問題的方法之一是將這些不兼容的 JavaScript 庫作為全局變量引入，而不是在 <script setup> 中使用 import 導(dǎo)入?？梢栽?index.html 中使用 <script> 標(biāo)簽手動引入這些庫，從而使它們成為全局可用的變量。

最終目標(biāo)：

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

問題解決（全局引用）

在 index.html 入口文件中通過 <script> 標(biāo)簽手動引入靜態(tài) JS 文件。這樣，該文件將被全局引用，可以在整個(gè)應(yīng)用程序中訪問它

<!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>

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

保存文件并重新啟動開發(fā)服務(wù)器。現(xiàn)在，這些 JavaScript 庫將在應(yīng)用程序加載時(shí)被引入，并可在整個(gè) Vue 3 應(yīng)用程序中使用。

總結(jié)

到此這篇關(guān)于vite創(chuàng)建vue3項(xiàng)目頁面引用public下js文件失敗解決辦法的文章就介紹到這了,更多相關(guān)vite創(chuàng)建vue3引用js文件失敗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: