静态资源处理
vue-cli有两个放置静态资源的地方,分别是src/assets文件夹和static文件夹,一般情况下:
static
static放不会变动的文件
static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath
和 build.assetsSubDirectory
连接来确定的。
assets
assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。例如,在 <img src="./logo.png">
和 background: url(./logo.png)
中,./logo.png
是相对的资源路径,将由Webpack解析为模块依赖。
因为 logo.png 不是 JavaScript,当被视为模块依赖时,需要使用 url-loader 和 file-loader处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader,因此可以使用相对路径引用。
资源处理规则
- 相对URL:
./assets/logo.png
将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代 - 没有前缀的URL:
assets/logo.png
将会被看成相对URL,并且转换成./assets/logo.png
- 前缀带
~
的URL:
~assets/logo.png
:会被当成模块请求, 类似于require('some-module/image.png'). 如果你想要利用Webpack的模块处理配置,就可以使用这个前缀。
比如,webpack.base.conf.js文件中alias属性中设置的路径别名,具体可查看 vue中路径别名alias设置 - 相对根目录的URL
/assets/logo.png
是不会被处理的
详情查看 : vue 资源路径处理