处理静态资源
项目中我们有两个目录存放静态资源: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]
。
在 集成后端框架 会有更多介绍。