静态资源处理

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 资源路径处理