Nuxt引用本地js或css文件

目录说明

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

区别

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

全局引用

在nuxt.config.js中设置

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

1. /static/videojs/video-js.css
2. /static/videojs/video.js
3. /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目录下

1. /assets/videojs/video-js.css
2. /assets/videojs/video.js
3. /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>

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

参考全局引用方式