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>
1
2
3
4
5
6
7
8
9
10

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>
1
2
3
4
5
6
7
8
9
10
11

引入外部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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

扩展：

如果是本地的CSS获取JS要配置再public 的目录下，然后安装public文件目录约定访问路径进行访问即可，例如

useHead({
  script: [
    {
      src: "/js/jquery.js",
    },
    {
      src: "/js/slide.js",
    },
  ],
});
1
2
3
4
5
6
7
8
9
10