vue webpack打包后图片路径错误的完美解决方法

项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。

因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。

解决办法如图：

(1).

修改 assetsPublicPath: './'

(2).打开webpack.prod.conf.js，在output：增加 publicPath: './'

虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码，如图所示：

添加publicPath:'../../'这一行代码，这样不论是字体还是图片的引用问题都能解决。

总结

以上所述是小编给大家介绍的vue webpack打包后图片路径错误的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue批量图片显示时遇到的路径被解析问题

    最近在学Vue,感觉很难理解,学不懂. 昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了. 在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码) 图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样 网页上却变成了这样 于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了 但是这种方法也太蠢了,以后不能也这样办吧 就在网上查了一下,要加一个require,很多帖子里的图片路径都加了

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • vue中本地静态图片路径写法

    这里写图片描述 需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id&

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue webpack build资源相对路径的问题及解决方法

    默认情况webpack+vue-cli打包的css.js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错. 如图: 解决方法: 在webpack.prod.conf.js中,output中添加或者修改为 publicPath: './': output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunk

  • vue.js 打包时出现空白页和路径错误问题及解决方法

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • Vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中 解决办法:去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压

  • Pycharm 文件更改目录后,执行路径未更新的解决方法

    今天在使用Pycharm的时候,由于文件过多,我对目录下的文件做了归类,改动了一些文件的路径,结果后来执行的时候,出现了路径找不到的错误. 新建一个test.py文件 此时打印test.py的路径为: /Users/hyl/Documents/workspace/python/version3+/untitled 将test.py文件放入lib文件夹下 此时打印test.py的路径依旧是: /Users/hyl/Documents/workspace/python/version3+/untit

  • ubuntu16.04下安装openssh-server报依赖错误的完美解决方法(非常不错)

    问题:系统重装后,安装和配置SSH,防火墙配置 #安装install openssh-server sudo apt install openssh-server -y 遇到问题: sudo apt install openssh-server -y 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 有一些软件包无法被安装.如果您用的是 unstable 发行版,这也许是 因为系统无法达到您要求的状态造成的.该版本中可能会有一些您需要的软件 包尚未被创建或

  • springboot 高版本后继续使用log4j的完美解决方法

    springboot 高版本后继续使用log4j的完美解决方法

    springboot  高版本后不支持log4j了,很多人还是喜欢log4j风格的日志,我们自己来加载log4j,其实很容易. 第一步:我们手动加入我们想要的log4j jar,在项目里面随便建一个文件夹,将用到的jar丢进去,右键 add to build path 第二步: 在main函数启动类所在的包或者其子包下写一个这样的类,用来加载log4j配置文件,是的,什么内容都没有. import org.springframework.boot.context.properties.Confi

  • System.Data.OleDb.OleDbException: 未指定的错误的完美解决方法

    System.Data.OleDb.OleDbException: 未指定的错误的完美解决方法

    异常详细信息: System.Data.OleDb.OleDbException: 未指定的错误 这个错误是access数据库特有的错误,当access频繁读取或操作过多的时候就会发生这个错误,微软官方已找不到具体的解决方法,网上搜索了很多,可以使用下面几种方法解决一下. 可能解决方法1: 重启服务器IIS,释放access连接,这种方法一般最有效,当然前提是自己有服务器控制权限,如果用虚拟主机的话主机商不太可能为一个网站重启iis,最好的方法就是转换为sql数据库. 可能解决方法2: 修改wi

  • 关于MySql 10038错误的完美解决方法(三种)

    第一种方法: 第一步: 先看报错窗口 2003 can't connect to MySQL server on '127.0.0.1'(10038). 第二步: 原因是:远程3306端口未对外开放操作. 第三步: 首先远程连接服务器,点击"开始"--> "管理工具"-->"高级安全Windows防火墙". 第四步: 在打开的窗口中,左边选中"入站规则",右边点击"新建规则"来建立一个入站规则.

随机推荐