处理资源路径

    例如，下面的模板代码片段：

    将会被编译成为：

    默认下列标签/特性的组合会被转换，且这些组合时可以使用 transformAssetUrls 选项进行配置的。

    资源 URL 转换会遵循如下规则：

    • 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。

    • 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

    • 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 指向 /src。

    因为像 .png 这样的文件不是一个 JavaScript 模块，你需要配置 webpack 使用 或者 url-loader 去合理地处理它们。通过 Vue CLI 创建的项目已经把这些预配置好了。

    转换资源 URL 的好处是：

    • file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。