vue上线后,背景图片路径错误
build 下的utils.js中添加配置
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',//配置背景图片打包后路径出错问题
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
打包后发现一部分背景图片还是没显示出来。后来找到一个规律:凡是行内样式中写的style:background的背景图片都没出来,
解决方法:将style样式写到css中,打包后图片显示正确。理由暂不清楚。
vue上线后,背景图片路径错误的更多相关文章
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue图片、背景图片路径问题
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...
- webpack学习笔记——打包后直接访问页面,图片路径错误
我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
随机推荐
- 斐波那契数列中获取第n个数据值
class Fibonacci { /** * Description:迭代方法获取fibonacci第n项数值 * * @param int $n * @return int */ public s ...
- bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
- java 原子性 可见性 有序性
原子性 原子性是指一个操作或多个操作要么全部执行完成且执行过程不被中断,要么就不执行. 如向变量x赋值操作 x = 10 是原子性的,就不会出现赋值操作进行到一半(x的低16位赋值成功,高16位没有赋 ...
- Hanlp中N最短路径分词详细介绍
N-最短路径 是中科院分词工具NLPIR进行分词用到的一个重要算法,张华平.刘群老师在论文<基于N-最短路径方法的中文词语粗分模型>中做了比较详细的介绍.该算法算法基本思想很简单,就是给定 ...
- 【Python】2.x与3.x版本的选用&版本间的区别
转自 http://www.runoob.com/python/python-2x-3x.html 一.2.x与3.x版本的选用建议 Python的3.0版本,常被称为Python 3000, ...
- SpringBoot入门(0) HelloWorld的实现与原理分析
SpringBoot(0) HelloWorld的实现与原理分析 一.环境准备 1.1 环境约束 –jdk1.8:Spring Boot 推荐jdk1.7及以上:java version “1.8.0 ...
- 5.IAP - FLASH
一.Flash与时钟系统的关系 STM32系统时钟: HSE 高速外部时钟,电路上焊接的外部时钟,一般是4Mhz-16Mhz,板子上的是8Mhz ...
- MySQL架构之 主从+ProxySQL实现读写分离
准备服务器: docker run -d --privileged -v `pwd`/mysql_data:/data -p 3001:3306 --name mysql5-master --host ...
- 生产者-消费者(wait-notify实现)
使用wait/notify来实现生产者消费者时能够达到在线程阻塞的效果,这样就不会出现轮询,然后浪费cpu时间的目的.代码如下:1. 状态类,表示是否已经生产: package com.demo; p ...
- BZOJ 1257: [CQOI2007]余数之和
1257: [CQOI2007]余数之和 Time Limit: 5 Sec Memory Limit: 128 MB Description 给出正整数n和k,计算j(n, k)=k mod 1 ...