vue 打包后 static 中图片路径不对的问题

那么在 子目录 部署的时候，就有可能出现本文要说的这个问题 【vue 打包后 static 中图片路径不对的问题】所以，本文后续内容的前置条件就是 子目录 部署。

---

【重点内容开始】

• 首先，你如果要部署在子目录的话，那么，你的 config/index.js 配置中，需要将 assetsPublicPath: '/' 改成 assetsPublicPath: './' => 示例代码 。这一点，应该没什么疑问吧。

然后这个时候，你的代码中，引入 static 中图片的时候，就不能使用 /static/images/a.png 这种绝对路径的形式； （虽然，你在开发环境，使用这种绝对路径的方式仍然没有任何问题，但是你部署后，就会发现，原本应该请求 xxx.com/aaaa/static/... 下面的资源，实际的请求地址是 xxx.com/static/... 就像我文章开头说的那样）。而是要使用相对路径的形式。=> 示例代码 大致如下：

与此同时呢，由于我们在 css 中使用了相对路径来引入图片。那么，打包后，我们的 css 会抽离出来为一个单独的 css 文件，这个时候， css 和 图片 之间的一个相对路径关系就改变了。为了解决这个问题，我们需要在