vue项目打包问题汇总


vue项目打包问题汇总

打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令。

常见问题一、静态资源加载不出来报错Failed to load resource: net::ERR_FILE_NOT_FOUND

解决方法:图片的相对路径问题,要引用相对路径下的图片,首先是在config/index.js中,将build.assetsPublicPath改为'./',原来是'/',

常见问题二、报错Cannot GET /

解决方法:配置问题,在config/index.js中,将dev.assetsPublicPath改为'/',原来是'/',可能被改为'./',这是不对的。


常见问题三、写在css上的背景图加载不出来,而直接用img标签加载的图片却出来了。

解决方法:配置build/utils.js,在return ExtractTextPlugin.extract里面加上一句publicPath:'../../',如下图


常见问题四、图片加载不出来,报错206

解决方法:服务器配置编码问题,这个一般后端同学配置下就可以了

常见问题五、使用iview开发的话,打包之后,直接打开index.html之后会报错,有字体文件引入失败

解决办法:在webpack.prod.conf.js中设置module.rules中的extract为false,如下图


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,353评论 7 110
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,867评论 0 21
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,884评论 1 32
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,715评论 4 31
  • 《望庐山瀑布(其二)》·李白 日照香炉生紫烟,遥看瀑布挂前川。 飞流直下三千尺,疑是银河落九天。 翻译:太阳照射香...
    e93f208fa9ea阅读 5,330评论 0 0

友情链接更多精彩内容