部署Vue项目至gh-pages时，如何修复背景图片路径问题？

从你的描述和路径错误来看，问题出在CSS中背景图片的路径解析逻辑上：打包后CSS文件位于static/css目录下，而你的背景图路径被解析成了相对于CSS文件的位置，导致多了一层static/css/前缀，最终路径变成static/css/static/img/xxx.png，而正确的应该是static/img/xxx.png。

下面给出两种可行的解决方案，推荐第一种（修改配置），不用逐个改组件路径更高效：

方案一：修改项目配置文件（推荐） #

你的项目是基于Vue CLI 2（从build文件夹能看出来），只需要调整config/index.js里的资源公共路径配置：

1. 打开config/index.js文件
2. 找到build对象下的assetsPublicPath属性，将默认的'/'修改为'./'：

build: {
  // ...其他配置
  assetsPublicPath: './',
  // ...其他配置
}

3. 重新执行npm run build打包项目，再部署到GitHub Pages

这个配置会让Webpack打包时使用相对路径生成资源引用，CSS中的背景图路径会被正确解析为../img/xxx.png（相对于static/css目录向上一级，正好指向static/img），从而解决路径嵌套的问题。

方案二：修改组件中背景图的路径写法 #

如果你不想改动全局配置，可以在CSS中使用Vue的路径别名来引用图片：

在组件的样式里，把原来的相对路径比如：

background: url('./static/img/footer.88ceaa2.png');

改成使用~@别名（@对应项目的src目录）：

background: url('~@/static/img/footer.88ceaa2.png');

Webpack会识别~@并正确解析到src/static/img目录下的图片，打包时生成正确的路径。

两种方案都能解决问题，方案一一次性解决所有背景图的路径问题，更适合全局统一处理；方案二适合单个组件的特殊路径调整。

内容的提问来源于stack exchange，提问作者Person