处理静态资源

项目中我们有两个目录存放静态资源：src/assets 和 static/ 。他俩有什么区别呢？

Webpack 处理资源

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

由于 logo.png 不是 JavaScript，当作为一个依赖模项来处理的时候，我们需要使用 url-loader 和 file-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.assetsPublicPath 和 build.assetsSubDirectory 使用绝对路径引用它们。

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

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

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

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