Vue 处理资源路径

处理资源路径

当你在js、css 或者*.vue文件中使用相对路径（必须以 . 开头）引用一个静态资源时，该资源将被webpack处理。

转换规则

• 如果URL是一个绝对路径，它将会被保留不变。

• 如果URL以 . 开头会作为一个相对模块请求被解释并基于文件系统的相对路径。

• 如果URL以 ~ 开头会作为一个模块请求被解析。这意味着你甚至可以Node模块中的资源。

• 如果URL以 @ 开头会作为一个模块请求被解析。Vue Cli默认会设置一个指向 src 的别名 @。

通过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页面中，你需要设置链接前缀。