一文解决 Vue打包后访问图片/图标不显示的问题

jzman 发布于2019-08-26 10:20 / 3957人阅读

摘要：大家可否遇到过打包后，项目在线上运行时，资源文件图片图标不显示的问题，接下来，我给大家分享一下我的解决方案检查打包后中的文件打开此文件后你会头晕，因为都是打包压缩过的代码，不过没关系，关键字搜索检查该路径是否匹配正确对比后惊人发现因此在路径

大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件(图片、图标)不显示的问题，
接下来，我给大家分享一下我的解决方案~

1.检查打包后dist中的css文件

打开此文件后你会头晕，因为都是打包压缩过的css代码，不过没关系，关键字搜索url

检查该url路径是否匹配正确
对比后惊人发现！！！

因此在url路径前添加../../就OK了，但是很麻烦，每次打包后都要进行二次加工吗？
并不是！！！

2.自动添加 ../../ 的方法
打开build/utils.js，检测publicPath值是否正确，自己配置成相应的即可！

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../"
      })
    } else {
      return ["vue-style-loader"].concat(loaders)
    }

配置好之后，npm run build打包后就会自动匹配正确的路径，无需手动修改，
最终解决项目打包后图片/图标/字体不显示的问题~

欢迎大家以后一起交流与学习~
这是我的个人微信

云服务器 GPU云服务器电脑不显示图标怎么解决访问腾讯云服务器上的图片不显示访问云服务器图片不显示访问云服务器图片不显示不出来

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106005.html

Vue仿饿了么app项目总结

摘要：前言这是我第一个基于的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。即将属性和请求返回数据对象合并到空对象，然后赋值给这里加上即提供了一种可扩展的机制，倘若原来的属性中有预定义的其他属性。前言这是我第一个基于 Vue 的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。源代码：ht...

FrozenMap 2019-08-26 11:47 评论0 收藏0
vue-cli + webpack 多页面实例配置优化方法

摘要：在谷歌找多页面，实例还是比较少，功夫不负有心人，在那找到了，具体可以到这个，非常感谢童鞋，今天要讲的内容是基于童鞋的多页面实例上再优化的。有需要一起交流的可以加我的微信，，记得备注技术交流哈。 vue+webpack是否有多页面目前使用vue来做项目，估计大部分都是单页面（SPA）应用，一个轻型的 MVVM 框架，谁用了MVVM框架，就再也回不去JQ时代了，哈哈。在手机端的项目，使...

Taste 2019-08-20 10:36 评论0 收藏0
webpack4搭建Vue开发环境笔记~~持续更新

摘要：项目地址一知识获取当前文件所在路径，等同于把一个路径或路径片段的序列解析为一个绝对路径给定的路径的序列是从右往左被处理的，后面每个被依次解析，直到构造完成一个绝对路径如果处理完全部给定的片段后还未生成一个绝对路径，则当前工作目录会被用上生成项目git地址一、node知识 __dirname: 获取当前文件所在路径，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 评论0 收藏0
太急了点吧？贴吧PWA20天就出炉了

摘要：老司机开车从不需要理由喜欢我就来点我吧易杭贴吧新鲜出炉的中文社区前述最近一直在写一个发贴子的应用，前不久才刚刚完工其实还有很多需要改进的地方。老司机开车从不需要理由喜欢我就来点我吧易杭贴吧--新鲜出炉的中文社区 http://tieba.freeedit.cn showImg(https://segmentfault.com/img/remote/146000000982...

王伟廷 2019-08-20 17:21 评论0 收藏0