随着vue3的更新，nuxt3也基于vue3更新了框架。相对于nuxt2、nuxt3的更新在、性能优化、响应式编程、TypeScript支持的支持上得到了更好的保障。

那么本篇就来介绍相对于nuxt2、nuxt3在外部文件如js、css引入的差异吧。

一、nuxt3中外部js的引入

    1、可组合函数: useHead

        useHead只能与组件的setup和生命周期钩子一起使用

<script setup lang="ts">
	useHead({
	  script: [ 
		{
			src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'
		}
	  ]
	})
</script>

这里如果需要将js放置body区域末尾，直接添加参数

script: [ 
	{
		src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js',
		body:true
	}
]

二、nuxt3中引入外部css

<script setup lang="ts">
	useHead({
	  link: [
		{
		  rel: 'preconnect',
		  href: 'https://fonts.googleapis.com'
		},
		{
		  rel: 'stylesheet',
		  href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
		  crossorigin: ''
		}
	  ]
	})
</script>