Vue 打包后背景图片不显示问题

大清早遇到一个问题纠结了一小会儿功夫，不过很快解决了，下面是解决方法。

第一步：改变路径配置，将绝对路径改为相对路径。

找到 config/index.js 文件改为如下：不知道地方的看下图即可

目标文件：项目目录 > config文件夹 > index.js

 

​​​​​​​assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加一个点变为相对路径）如下：

build: {
    assetsPublicPath: './'
}

第二步：配置背景图片路径。

找到 build/utils.js 文件增加如下所示。不知道地方的看下图即可

打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片，在build文件内utils.js中配置路径。

目标文件：项目目录 > build文件夹 >utils.js

function generateLoaders (options) {
    ...
    if (options.extract) {
      return ExtractTextPlugin.extract(