Nuxt资源文件夹,别名,图片url和css

资源文件夹

Nuxt 有两种资源文件夹assetsstatic

它们的区别文档上已经说得很清楚:

如果你的静态资源文件需要 Webpack 做构建编译处理,可以放到 assets 目录,否则可以放到 static 目录中去。

具体表现就是:

(图片或字体)的尺寸小于 1K 的时候,它将会被转换成 Base-64 data URL 来内联引用;否则它将被拷贝至指定的子目录(在 .nuxt 目录下),并被重命名(加上 7 位的哈希码作为版本标识)以实现更好的缓存策略。

而 static 里面的资源不会做这些处理。

所以引用的方式也不同:

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png" />

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />

别名

Nuxt 有两种默认别名写法~@

我个人推荐@,因为在 2.0 后~可能会出问题:

请注意: 从 Nuxt 2.0 开始,~/alias 将无法在 CSS 文件中正确解析。你必须在 url CSS 引用中使用~assets(没有斜杠)或@别名,即 background:url(“~assets/banner.svg”)

sass/css 引用图片的路径

在 scss 或 css 中最好不要使用别名路径,而应该遵循 css 规范,路径相对于 css 本身。因为别名往往在 scss,css 中不起作用。

如果你打算将图片放到 assets 中,那么你最好在 scss 和 css 中使用相对路径引用图片。

动态 src 的写法

正确的写法:

<img :src="require('@/assets/img/myimg' + n + '.jpg')">

上面的例子里,因为图片是放到了 assets 里面且又使用了别名,所以要让 webpack 知道,就要使用 require

错误的写法(没有 require):

<img :src="'@/assets/img/myimg' + n + '.jpg'">

错误的写法(src 没有冒号):

<img src="require('@/assets/img/myimg' + n + '.jpg')">

这一点来说,确实不如 React 的纯 javascript 来的直观。


Total views.

© 2013 - 2019. All rights reserved.

Powered by Hydejack v6.6.1