vue项目打包后资源路径与背景图路径问题

本文主要解决基于vue/vuex打包后经常出现的两个问题：

• 静态资源路径错位问题

• css背景图路径错位问题

• 问题的出现：
  一般通过vue-cli脚手架开发的时候，开发模式使用npm run dev进行开发，一切配置正常。但是当打包后会出现各种问题，其中两个最为常见且致命的问题莫过于上述的两个资源路径错位问题，但是当我们分析后，发现依旧是配置问题。尤其是当好多猿把assetsPublicPath: '/'的'/'改为'./'后，一般的资源路径包括css、js、图片音视频等都能校正，然而唯独css设置的背景图却全部失效。接下来请看此bug图。

• bug图：

1. 资源路径404

资源路径404.png

2. 背景图路径404

背景图404.jpg

可以看到背景图的路径错且重复。

• 解决方案：

1. 静态资源路径错位问题解决方案：
在项目/config/index.js中找到module.exports中的build，其中的assetsPublicPath项改为：

assetsPublicPath: './', //解决静态资源路径错位问题

2. css背景图路径错位问题解决方案：
在项目/build/utils.js中找到ExtractTextPlugin.extract，追加publicPath: '../../'：
代码片段为：

return ExtractTextPlugin.extract({            use: loaders,
            fallback: 'vue-style-loader',
            publicPath: '../../'  //解决css背景图路径错位问题
      })

• 测试结果：
  ok，配置完毕，打包测试下~
  npm run build 倒数10个数：10,9,8,7,6...
  控制台空空如也~完美！
  

  

  完美解决.png

作者：流眸Tel
链接：https://www.jianshu.com/p/23f6aeb26083