处理资源路径
当你在js、css 或者*.vue文件中使用相对路径（必须以 . 开头）引用一个静态资源时，该资源将被webpack处理。
转换规则
- 如果URL是一个绝对路径，它将会被保留不变。
<img alt="logo" src="/assets/logo.png"/>
<img alt="logo" src="https://image.xxx.com/logo.png"/>
- 如果URL以 . 开头会作为一个相对模块请求被解释并基于文件系统的相对路径。
<img alt="logo" src="./assets/logo.png"/>
- 如果URL以 ~ 开头会作为一个模块请求被解析。这意味着你甚至可以Node模块中的资源。
<img alt="logo" src="～some-npm-package/logo.png"/>
- 如果URL以 @ 开头会作为一个模块请求被解析。Vue Cli默认会设置一个指向 src 的别名 @。
<img alt="logo" src="@/component/logo.png"/>
通过webpack处理并获取有如下好处：
- 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
- 文件丢失会直接在编译的时候报错，而不是产生404错误。
- 最终生产的文件名称包含了内容哈希值，不必担心浏览器有缓存。
有如下情况时，请考虑将资源放置在public文件夹下
- 需要在构建输出中一个固定的文件名字。
- 有大批量的图片，需要动态引用他们的路径。
- 有些库与webpack不兼容，需要用独立的script标签将其引入。
使用public文件夹的注意事项
- 如果你的程序没有部署在域名的根目录，那么需要为URL配置 publicPath 前缀
// vue.config.js
module.exports = {
publicPath:process.env.NODE_ENV === 'production'
? '/路径/'
:'/'
}
- 在 public/index.html 等通过 html-webpack-plugin 用作模版的 HTML页面中，你需要设置链接前缀。
<link rel='icon' href="<%= BASE_URL =%>favicon.ico">
