vite創(chuàng)建vue3項(xiàng)目頁(yè)面引用public下js文件失敗解決辦法
問(wèn)題出現(xiàn)
情景描述：
在將html頁(yè)面轉(zhuǎn)到vite構(gòu)建的vue3項(xiàng)目頁(yè)面時(shí)內(nèi)容和樣式已經(jīng)正確引入，（引入前將html頁(yè)面的靜態(tài)資源全部放到了public靜態(tài)資源下）但是js文件在vue頁(yè)面引入時(shí)報(bào)各種錯(cuò)，解決這個(gè)出現(xiàn)那個(gè)
原因查詢：
基于此情況我閱讀了vite官方文檔發(fā)現(xiàn)：public 中的資源不應(yīng)該被 JavaScript 文件引用也就是說(shuō)在vue3頁(yè)面的script中不能使用import導(dǎo)入public下的靜態(tài)js文件
為什么不能這樣導(dǎo)入？
因?yàn)槟阍?Vue 3 的 <script setup> 區(qū)塊中使用了導(dǎo)入的 JavaScript 庫(kù)，但是這些庫(kù)可能不是以模塊化方式編寫的，無(wú)法直接與 Vue 組件進(jìn)行交互。
在 Vue 3 中，<script setup> 區(qū)塊將組件邏輯放在單個(gè)區(qū)塊中，自動(dòng)推斷變量和組件選項(xiàng)，并且默認(rèn)開啟了類似于模塊化的模式。然而，一些舊的 JavaScript 庫(kù)可能不符合這種模塊化規(guī)范，無(wú)法直接與 Vue 組件配合使用。
解決這個(gè)問(wèn)題的方法之一是將這些不兼容的 JavaScript 庫(kù)作為全局變量引入，而不是在 <script setup> 中使用 import 導(dǎo)入?？梢栽?index.html 中使用 <script> 標(biāo)簽手動(dòng)引入這些庫(kù)，從而使它們成為全局可用的變量。
最終目標(biāo)：
在頁(yè)面中使用 public 文件夾下的 JavaScript 文件
問(wèn)題解決（全局引用）
在 index.html 入口文件中通過(guò) <script> 標(biāo)簽手動(dòng)引入靜態(tài) JS 文件。這樣，該文件將被全局引用，可以在整個(gè)應(yīng)用程序中訪問(wèn)它
<!DOCTYPE html> <html> <head> <!-- head 部分代碼 --> </head> <body> <!-- body 部分代碼 --> <!-- 引入其他資源 --> <!-- 手動(dòng)引入的 JavaScript 庫(kù) --> <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>
注意：確保使用正確的路徑來(lái)引入這些庫(kù)文件，路徑應(yīng)該是相對(duì)于你的項(xiàng)目根目錄來(lái)指定的。
保存文件并重新啟動(dòng)開發(fā)服務(wù)器。現(xiàn)在，這些 JavaScript 庫(kù)將在應(yīng)用程序加載時(shí)被引入，并可在整個(gè) Vue 3 應(yīng)用程序中使用。
總結(jié)
到此這篇關(guān)于vite創(chuàng)建vue3項(xiàng)目頁(yè)面引用public下js文件失敗解決辦法的文章就介紹到這了,更多相關(guān)vite創(chuàng)建vue3引用js文件失敗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目使用js監(jiān)聽(tīng)瀏覽器關(guān)閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用js監(jiān)聽(tīng)瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來(lái)看看吧2023-03-03
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下2022-10-10
vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問(wèn)題
我的頁(yè)面是從一個(gè)vue頁(yè)面router跳轉(zhuǎn)到另一個(gè)vue頁(yè)面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁(yè)簽,但是不知道為什么有時(shí)候可以有時(shí)候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問(wèn)題,需要的朋友可以參考下2024-03-03
vue項(xiàng)目中使用bpmn-自定義platter的示例代碼
這篇文章主要介紹了vue項(xiàng)目中使用bpmn-自定義platter的實(shí)例代碼，本文通過(guò)代碼截圖相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法詳解
項(xiàng)目中后臺(tái)返回的時(shí)間有多種形式,時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式,下面這篇文章主要給大家介紹了關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄
這篇文章主要介紹了vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽(tīng)器來(lái)動(dòng)態(tài)監(jiān)測(cè)元素的高度,文中給出了簡(jiǎn)單代碼示例,需要的朋友可以參考下2023-09-09
詳解vue3結(jié)合ts項(xiàng)目中使用mockjs
這篇文章主要為大家介紹了vue3結(jié)合ts項(xiàng)目中使用mockjs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue計(jì)算屬性及函數(shù)的選擇，文章圍繞主題的相關(guān)資料展開詳細(xì)介紹，需要的小伙伴可以參考一下2022-05-05