Nuxt.js项目引用本地js或css文件
分类:计算机 | 前端 | Vue | SSR服务端渲染 | Nuxt.js框架 | 综合 2074
更新:2021-02-26 00:02:57编辑
转载地址
https://blog.csdn.net/just4you/article/details/108866048
1 目录说明
在Nuxt中引用第三方js等资源文件,可将文件放在/assets或/static目录下。
1.1 区别
- /assets目录下的文件会被webpack编译。
- /static目录下的文件不会被编译。
2 全局引用
在nuxt.config.js中设置
2.1 第三方文件放置在/static目录下
- /static/videojs/video-js.css
- /static/videojs/video.js
- /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目录下
- /assets/videojs/video-js.css
- /assets/videojs/video.js
- /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目录下
参考全局引用方式。
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据10882
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目9445
- 3Microsoft Visual C++ Redistributable是什么,有什么作用?7179
- 4mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)5754
- 5uni-app使用经验—vue页面和html页面如何互相调用接口并传参5436
- 6Spring学习经验—@ResponseBody注解的使用说明4844
- 7Intellij IDEA下的版本控制VCS的启用与关闭4784
- 8Druid异常解决经验—java.sql.SQLException url not set4461
- 9如何用批处理命令(bat脚本)启动和停止windows服务4229
- 10nuxt.js项目中如何添加和使用全局变量4097
- 11解决SpringBoot使用maven下载不了jar包的问题3451
- 12linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”3342
- 13nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数3205
- 14在Nuxt.js项目的head中引用外部js文件3042
- 15在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一3018