vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图:

当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了

解决方法:只需要在build/utils.js文件中添加如下一行代码即可。
publicPath:'../../'
如下图:

这样就解决这个问题。
vue-cli构建的vue项目打包后css引入的背景图路径不对的问题的更多相关文章
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- vue项目打包后想发布在apache www/vue 目录下
使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...
- vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
随机推荐
- NSClassFromString 实例话静态库中的类
Class myClass = NSClassFromString("StaticLibyClassName"); StaticLibyClassName是从静态库中实例化一个Cl ...
- linux环境安装python
linux环境下安装python3,一步一步来吧! 安装python3 安装readline-devel依赖 ,用于解决python3安装完成后,退格和方向键乱码问题 yum install read ...
- python 根据字典中的key,value进行排序
#coding=utf-8 import requests,json,collections,base64,datetime def sort(datas): data=json.dumps(data ...
- [译]Javascript中的闭包(closures)
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-3.1.xsd)
解决方法: 将 Preferences > XML > XML Files > Validation中"Honour all XML schema locations&qu ...
- c#静态方法和非静态方法区别
c#静态方法和非静态方法区别 C#的类中可以包含两种方法:C#静态方法与非静态方法.那么他们的定义有什么不同呢?他们在使用上会有什么不同呢?让我们来看看最直观的差别:使用了static 修饰符的方法为 ...
- 根据Attribute值条件对XML文档进行修改
现手上有一个XML文档, 需要把"直接工序"改为"间接工序0". 你可以使用<对XML文档进行修改> http://www.cnblogs.com/ ...
- CentOS6.5上Zabbix3.0的RPM安装【一】-安装并配置Server
一.Environment OS:CentOS6.5 64bit [桌面版安装] Server端:192.168.201.109 ServerName Clinet端:192.168.201.199 ...
- Unity苹果(iOS)内购接入(Unity内置IAP)
https://www.jianshu.com/p/4045ebf81a1c Unity苹果(iOS)内购接入(Unity内置IAP) Kakarottog ...
- Jquery学习理解 (课堂)
Jquary概述 3 1.Jquary简介 3 1.1什么是jquery 3 2.使用jquary 4 2.1浏览器如何解析HTML文件 4 2.2利用选择器定位节点 4 2.3调用方法操作节点 5 ...