"vue2.0 资源文件assets和static的区别详解"
本文详细介绍了 Vue 2.0 中资源文件 assets 和 static 的区别，帮助读者了解这两个路径下的文件处理方式的差异。
在 Vue 项目结构中，有两个资源文件的路径分别是 src/assets 和 static/。那么，这两个路径下的文件有什么区别呢？
在解释这两个路径下的文件处理方式之前，我们首先需要理解 Webpack 是怎样处理静态资源的。在 *.vue 组件中，所有的 templates 和 css 都会被 vue-html-loader 和 css-loader 解析，寻找资源的 URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中，“./logo.png” 中的相对资源路径都会被 Webpack 解析成模块依赖。
由于 logo.png 不是 JavaScript，当被看成一个模块依赖的时候，我们需要使用 url-loader 和 file-loader 进行处理。该模板已经配置好了这些 loaders，所以你能够使用相对/模块路径时不需要担心部署的问题。
assets 路径下的文件处理规则是，相对 URL，例如 ./assets/logo.png 将会被解释成一个模块依赖。它们会被一个基于你的 Webpack 输出配置自动生成的 URL 替代。没有前缀的 URL，例如 assets/logo.png 将会被看成相对 URL，并且转换成 ./assets/logo.png。前缀带 ~ 的 URL 会被当成模块请求，类似于 require('some-module/image.png')。
在 static/ 路径下的文件处理规则不同，所有文件都不会被 Webpack 处理：它们使用相同的文件名，直接拷贝到最终的路径。你必须使用绝对路径来引用这些文件，取决于在 config.js 里面加入的 build.assetsPublicPath 和 build.assetsSubDirectory。
例如，在 config/index.js 中的默认值是：
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
所有放在 static/ 目录下的文件都应该是使用绝对 URL /static/[filename] 引用的。如果你将 assetSubDirectory 的值改成 assets，那么这些 URL 就会被变成 /assets/[filename]。
assets 和 static 路径下的文件处理方式不同。assets 路径下的文件会被 Webpack 处理，而 static 路径下的文件不会被处理。因此，在选择使用哪个路径时，需要根据实际情况进行选择。
本文希望对大家的学习有所帮助，也希望大家多多支持我们。
