Nuxt.js项目引用本地js或css文件

分类:计算机 | 前端 | Vue | SSR服务端渲染 | Nuxt.js框架 | 综合 395
更新:2021-02-26 00:02:57
编辑

转载地址

https://blog.csdn.net/just4you/article/details/108866048

1 目录说明

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

1.1 区别

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

2 全局引用

在nuxt.config.js中设置

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

  1. /static/videojs/video-js.css
  2. /static/videojs/video.js
  3. /static/videojs/videojs-contrib-hls.js

2.1.1 引用方式

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

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

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

  1. /assets/videojs/video-js.css
  2. /assets/videojs/video.js
  3. /assets/videojs/videojs-contrib-hls.js

2.2.1 引用方式

...
  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

3 单独引用

页面index.vue中

3.1 第三方文件放在/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>

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

参考全局引用方式。