解决Vue打包后背景图片路径错误问题
1.原因解析
当用vue-cli自动构建项目后,有两种运行方法,分别是:
npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片。
npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题。
注:
绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe
相对路径:从当前路径开始的路径
构建后的项目, 都需要读取静态资源,静态资源分为三种, JS, CSS, IMG,目录结构如下:
//结构目录
此时通过img标签引入的图片显示正常,是因为img为html标签,他的路径是由index.html开始访问的,他走static/img/'图片名'
是能正确访问到图片的
但是app.css访问static/img/'图片名'
是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。
2.解决方案
具体办法是:
打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可。
解决Vue打包后背景图片路径错误问题的更多相关文章
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue打包空白及字体路径错误问题
vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- vue上线后,背景图片路径错误
build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
- 解决vue项目打包后背景图片找不到的问题
在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../",
- vue项目在webpack打包后背景图片显示不了
加上 publicPath:'../../'即可
随机推荐
- Java集合(三)--Collection、Collections和Arrays
Collection: Collection是集合类的顶级接口,提供了对集合对象进行基本操作的通用接口方法.Collection接口的意义是为各种具体的集合提供了最大化 的统一操作方式,其直接继承接口 ...
- java图片放大或缩小
package org.jimmy.autotranslate20181022.utils; import java.awt.Graphics; import java.awt.image.Buffe ...
- selenium webdriver 常用断言
断言常用的有: assertLocation(判断当前是在正确的页面). assertTitle(检查当前页面的title是否正确). assertValue(检查input的值, checkbox或 ...
- python pandas读写excel
import pandas as pd import numpy as np df = pd.read_csv("result.csv") # csv # df = pd.read ...
- 牛客网提高组第二场---solution
T1 方差 根据题目要求将式子先写出来注意下面式子中的 $n$ 全部都是 $n-1$$$\begin{aligned}ans&=n^2\times \frac{1}{n}\times \sum ...
- java IO流 内容整理
在java中,对数据的输入和输出操作以流的方式进行.(注:对文件的操作用io.File类,但不能对文件中的内容进行操作) 一.IO流的分类: 按数据流的方向不同,可以分为输入流和输出流: 按处理数据的 ...
- Python使用Flask框架,结合Highchart,自定义图表样式主题
参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...
- mysql多表合并为一张表
有人提出要将4张表合并成一张.数据量比较大,有4千万条数据.有很多重复数据,需要对某一列进行去重. 数据量太大的话,可以看我另外一篇:http://www.cnblogs.com/magmell/p/ ...
- Data of Ch5 --Dual rotor
* Results *Conclusion*- little effect of rear rotor on Cp_1- Cp1 is independent of TI** TI effect on ...
- (转载)C++ string中find() ,rfind() 等函数 用法总结及示例
string中 find()的应用 (rfind() 类似,只是从反向查找) 原型如下: (1)size_t find (const string& str, size_t pos = 0) ...