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项改为:

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

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

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


  • 测试结果:
    ok,配置完毕,打包测试下~
    npm run build 倒数10个数:10,9,8,7,6…
    控制台空空如也~完美!
    完美解决.png
---本文结束感谢您的阅读---

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

文章作者:Lomo 朱幸民

发布时间:2019年02月28日 - 21:55:51

最后更新:2019年07月10日 - 08:45:48

原始链接:https://www.zhuxingmin.com/2019/02/28/vue项目打包后资源路径与背景图路径问题/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%