处理静态资源

项目中我们有两个目录存放静态资源:src/assetsstatic/ 。他俩有什么区别呢?

Webpack 处理资源

首先要知道 webpack 如何处理资源的,在 *.vue 组件中,所有的模版和 CSS 都是通过 vue-html-loadercss-loader 解析资源的。如,在 <img src="./logo.png">background: url(./logo.png)"./logo.png" 是一个相对路径,会被 webpack 作为依赖模块处理。

由于 logo.png 不是 JavaScript,当作为一个依赖模项来处理的时候,我们需要使用 url-loaderfile-loader 来处理它。这个模版已经为你配置好这些加载器了,所以你基本可以直接使用这些特性(如 文件名指纹、内嵌 base64 编码),在使用相对路径的模块的时候也不用担心部署会出问题。

因为 build 过程中,这些资源也许会被内嵌/复制/重命名,它们本质上是源代码的一部分。这就是为什么我们建议把要打包的静态资源放在 /src中,和其它源代码并列。事实上,你甚至不用把全部静态资源放在 /src/assets:你可以在模块或组件的基础上组织它们。例如,你可以为每一个组件自己建一个文件夹,让静态资源紧挨着它。

URL 解析

  • 相对路径的 URL, 例如, ./assets/logo.png 会被解释成一个模块依赖项,最后根据 Webpack 的 output 配置项生成静态资源的网址来替换它。

  • 无前缀路径的 URL, 例如 assets/logo.png 会被作为与相对路径引用相同的方式处理,首先编译成 ./assets/logo.png,再处理。

  • 前缀为 ~ 的 URL 会被作为模块引用, 类似 require('some-module/image.png')。 如果你想用 Webpack 管理模块,需要加上此前缀。例如,使用别名解析 assets ,这样使用 <img src="~assets/logo.png"> 来确保有效。

  • 相对根路径的 RUL, 如,/assets/logo.png 不会被处理。

用 JavaScript 操作资源路径

为了让 Webpack 返回正确的资源路径,你需要使用 require('./relative/path/to/file.jpg') ,它会通过 file-loader 处理然后返回正确的 URL,例如:

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

上面的例子在最后编译中会包括 ./bgs/ 下面的全部的图片。 因为 Webpack 在不知道在运行时会调用哪个,所以就包含所有的。

"真正的" 静态资源

对比下,会发现 static/ 目录下所有的文件都没有被 Webpack 处理, 它们直接被拷贝到目的地,文件名也没变。你需要根据 config.js 文件下的 build.assetsPublicPathbuild.assetsSubDirectory 使用绝对路径引用它们。

假设一个带有如下默认配置的例子:

// config.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

static/ 目录下的文件用绝对路径 /static/[filename] 引用。如果将 assetSubDirectory 的值改成 assets ,那么引用的 URL 将会变成 /assets/[filename]

集成后端框架 会有更多介绍。

results matching ""

    No results matching ""