Nuxt3框架局部文件引用外部JS/CSS文件的相关配置方法

引入外部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",},],
});