已解决
Nuxt3框架局部文件引用外部JS/CSS文件的相关配置方法
来自网友在路上 11018101提问 提问时间:2023-11-21 02:22:18阅读次数: 101
最佳答案 问答题库1018位专家为你答疑解惑
引入外部JS:
<script setup>useHead({script: [ {type: "text/javascript",src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'}]})
</script>
useHead只能与组件的setup和生命周期钩子一起使用
如果需要将js放置body区域末尾,直接添加参数
<script setup>useHead({script: [ {type: "text/javascript",src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js',body:true}]})
</script>
引入外部CSS:
<script setup>useHead({link: [{rel: 'preconnect',type: "text/css",href: 'https://fonts.googleapis.com'},{rel: 'stylesheet',type: "text/css",href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',crossorigin: ''},{rel: "stylesheet",type: "text/css",href: "https://unpkg.com/swiper@8/swiper-bundle.css",},]})
</script>
扩展:
如果是本地的CSS获取JS要配置再public 的目录下,然后安装public文件目录约定访问路径进行访问即可,例如
useHead({script: [{src: "/js/jquery.js",},{src: "/js/slide.js",},],
});
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"Nuxt3框架局部文件引用外部JS/CSS文件的相关配置方法":http://eshow365.cn/6-40806-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!