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打包后图片路径错误的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 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批量图片显示时遇到的路径被解析问题
最近在学Vue,感觉很难理解,学不懂. 昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了. 在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码) 图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样 网页上却变成了这样 于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了 但是这种方法也太蠢了,以后不能也这样办吧 就在网上查了一下,要加一个require,很多帖子里的图片路径都加了
-
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了,很多人还是喜欢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: 未指定的错误 这个错误是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防火墙". 第四步: 在打开的窗口中,左边选中"入站规则",右边点击"新建规则"来建立一个入站规则.
随机推荐
- 小技巧处理div内容溢出
- 使用SQL Server判断文件是否存在后再删除(详解)
- 用js正确判断用户名cookie是否存在的方法
- 超级退弹代码
- DOM2非标准但却支持很好的几个属性小结
- Bootstrap每天必学之简单入门
- python执行外部程序的常用方法小结
- python压缩文件夹内所有文件为zip文件的方法
- Android 属性动画ValueAnimator与插值器详解
- Mysql select in 按id排序实现方法
- C#实现压缩HTML代码的方法
- JQuery中阻止事件冒泡几种方式及其区别介绍
- PowerShell中以管理员权限启动应用程序的方法
- FileSystemObject 对象
- javaweb页面附件、图片下载及打开(实现方法)
- jquery实现metro效果示例代码
- JavaScript实现多个重叠层点击切换效果的方法
- node.js中的fs.lstat方法使用说明
- 有关于整体刷新和局部刷新frameset窗口
- 详解java中接口与抽象类的区别