vue3+ts import引入第三方js文件报错解决方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+ts import引入第三方js文件报错解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3+ts import引入第三方js文件报错解决方法

报错原因：执行 import XXX from ‘XXX.js’ 报错，The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准，不能按需导入
vue3 引用第三方js,vue3.0,javascript,vue.js,前端
解决方案:

第一种方法：
在index.html里利用script全局引入

  <script type="text/javascript" src="xxx.js"></script>

第二种方法：
在所需的.vue文件里单独引入，最后在head标签里生成js和css，离开页面时移除文章来源地址https://www.toymoban.com/news/detail-569198.html

//移除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钩子里执行
onBeforeMount(()=> {
     loadjscssfile("mystyle.css", "css")
     loadjscssfile("xxx.js?" + Math.random(), "js");
 })
 //销毁
 onUnmounted(()=>{
     removejscssfile("mystyle.css", "css");
     removejscssfile("xxx.js", "js");
 })