Nuxt.js static和assets目录区别

Nuxt中static和assets目录下主要用来存放一些图片、.js、.css等静态资源文件,这是两个目录的共同特点。

是否打包压缩到代码中

static和assets不同的地方在于项目打包发布的时候,assets资源会被webpack打包压缩到你的代码中,而static目录下资源不会被压缩到代码中,而是直接复制dist文件下。

比如以一张图片为例,如果放在static目录下会把打包压缩到代码中,而放在static目录下不会打包到代码中,会跟着static文件复制到dist中单独存在。这说明,如果一张图片比较大,你不想压缩到代码中,可以放在static中,如果一张图片比较小,你不想单独通过http请求一次,可以放在assets目录下。

比如你想引入一个第三方js库jquery.js,不想和你自己的代码打包压缩在一起,可以选择放在static目录下。

vue组件引入static目录资源

以图片为例演示资源引入

<!-- 引用 static 目录下的图片 -->
<img src="/电子书封面.jpg"/>
//引入static 目录下的.js库
import '/three-camv3m4.min.js'

vue组件引入assets目录资源

<!-- 引用 assets 目录下图片 -->
<img src="~/assets/网站logo.png">