【8】Nuxt.js 资源文件

资源文件

默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static目录中。

Webpack 构建

默认情况下, vue-loader自动使用 css-loader 和Vue模板编译器来编译处理vue文件中的样式和模板。在此编译过程中，所有的资源URL例如 <img src="...">、 background: url(...) 和 CSS中的 @import 均会被解析成模块通过 require 引用。

举个例子, 假设我们有以下文件目录结构：

-| assets/
----| image.png
-| pages/
----| index.vue

如果我们在CSS代码中使用 url('~assets/image.png'), 那么编译后它将被转换成 require('~/assets/image.png')。

请注意: 从Nuxt 2.0开始，~/alias将无法在CSS文件中正确解析。你必须在url CSS引用中使用~assets（没有斜杠）或@别名，即bac