当前位置:首页 > 编程笔记 > 正文
已解决

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 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!