Nuxt引用本地js或css文件

最新推荐文章于 2024-08-19 17:22:39 发布

just4you

最新推荐文章于 2024-08-19 17:22:39 发布

阅读量8.9k

点赞数 4

分类专栏： JavaScript vue 文章标签： vue javascript nuxt

本文链接：https://blog.csdn.net/just4you/article/details/108866048

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

5 篇文章 1 订阅

订阅专栏

本文详细介绍了在Nuxt.js框架中如何在/assets和/static目录下引用第三方JS和CSS资源。关键区别在于/assets目录下的文件会被webpack编译，而/static目录下的则不会。全局引用时，静态文件应放于/static，直接在nuxt.config.js中配置；局部引用则可在页面组件内按需导入。引用时注意路径的写法，对于/static目录，路径不需要包含/static前缀。

摘要由CSDN通过智能技术生成

目录说明

在Nuxt中引用第三方js等资源文件，可将文件放在/assets或/static目录下

区别

/assets目录下的文件会被webpack编译
/static目录下的文件不会被编译

全局引用

在nuxt.config.js中设置

第三方文件放置在/static目录下

/static/videojs/video-js.css
/static/videojs/video.js
/static/videojs/videojs-contrib-hls.js

引用方式

...
  head: {
    ...
    link: [
      ...
      { rel: 'stylesheet', href: '/videojs/video-js.css' }
    ],
    script: [
      { src: '/videojs/video.js' },
      { src: '/videojs/videojs-contrib-hls.js' }
    ]
  },
...

注意：引用时，不需要添加/static目录，因为/static目录编译后会被映射到/目录

第三方文件放置在/assets目录下

/assets/videojs/video-js.css
/assets/videojs/video.js
/assets/videojs/videojs-contrib-hls.js

引用方式

...
  head: {
     ...
    link: [
      ...
      { rel: 'stylesheet', href: require('~/assets/videojs/video-js.css') }
    ],
    script: [
      { src: require('~/assets/videojs/video.js') },
      { src: require('~/assets/videojs/videojs-contrib-hls.js') }
    ]
  },
...

重点就是require

单独引用

页面index.vue中

第三方文件放置在/static目录下

<script>
export default {
  head() {
    // 引入js,css
    return {
      link: [
        { rel: 'stylesheet', href: '/videojs/video-js.css' }
      ],
      script: [
        { src: '/videojs/video.js' },
        { src: '/videojs/videojs-contrib-hls.js' }
      ]
    }
  },
  ...
}
</script>