vue3+ts import引入第三方js文件報錯的2種解決方法
更新時間:2023年08月29日 09:16:37 作者:qq_37656005
這篇文章主要給大家介紹了關于vue3+ts import引入第三方js文件報錯的2種解決方法,在Vue中通常我們引入一個js插件都是使用npm方式下載然后import使用的,需要的朋友可以參考下
報錯原因:
執(zhí)行 import XXX from ‘XXX.js’ 報錯,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模塊化標準,不能按需導入
解決方案:
第一種方法:
在index.html里利用script全局引入
<script type="text/javascript" src="xxx.js"></script>
第二種方法:
在所需的.vue文件里單獨引入,最后在head標簽里生成js和css,離開頁面時移除
//移除js或者css function removejscssfile(filename,filetype){ let targetelement = (filetype === "js")? "script" :(filetype === "css")? "link" : "none"; let targetattr = (filetype === "js")?"src" : (filetype === "css")? "href" :"none"; let allsuspects = document.getElementsByTagName(targetelement); for (let i = allsuspects.length; i >= 0; i--){ if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!= -1) allsuspects[i].parentNode.removeChild(allsuspects[i]) } } //加載js或者css function loadjscssfile(filename, filetype){ if (filetype === "js"){ var fileref = document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src",filename); } else if (filetype === "css"){ var fileref = document.createElement("link"); fileref.setAttribute("rel","stylesheet"); fileref.setAttribute("type","text/css"); fileref.setAttribute("href",filename); } if (typeof fileref != "undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); } } //在vue鉤子里執(zhí)行 onBeforeMount(()=> { loadjscssfile("mystyle.css", "css") loadjscssfile("xxx.js?" + Math.random(), "js"); }) //銷毀 onUnmounted(()=>{ removejscssfile("mystyle.css", "css"); removejscssfile("xxx.js", "js"); })
總結
到此這篇關于vue3+ts import引入第三方js文件報錯的2種解決方法的文章就介紹到這了,更多相關vue3 import引入第三方js文件報錯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關于Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項目中遇到的一個問題,這里給大家總結下解決辦法,需要的朋友可以參考下2023-08-08