Vue 处理资源路径

处理资源路径

当你在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">