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上线后,背景图片路径错误的更多相关文章

  1. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

  2. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  6. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  7. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  8. webpack学习笔记——打包后直接访问页面,图片路径错误

    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...

  9. vue 打包的项目当背景图路径错误

    当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',

随机推荐

  1. H5入门须知

    ---恢复内容开始--- 首先,让我们来了解一下H5是做什么的,H5全称为“超文本标记语言”.是对网页进行编辑的技术.H5运用Hbulider进行网页编辑.网页可以分为三部分分别是title(主题)u ...

  2. flask,gunicorn,supervisor,nginx配置服务器接口

    1,申请阿里云主机 2,apt-get update 3,apt-get install pip 4,pip install virtualenv 5,virtualenv venv 6,source ...

  3. VUE打包上线优化

    1.将vue vue-router vuex 尽量使用CDN externals: { 'vue':'Vue', 'vue-router':'VueRouter', 'vuex':'Vuex', 'a ...

  4. SWD通讯

    这几日看到坛里有几个关于SWD协议相关的文章,自己也尝试了下,有点体会,也有些疑惑,写出来与大家分享和交流下.    以下我的模拟SWD接口的板子简称为Host,目标MCU(即我要连接的板子)简称为T ...

  5. ubuntu crontab python 定时任务备记

    crontab -e 写入: # at a.m every week with: # * * tar -zcf /var/backups/home.tgz /home/ # # For more in ...

  6. [UE4]Spacer

    一.Spacer:留白占位控件 二.如下图所示,如果想要2个按钮都在容器右对齐: 三.可以放一个Spacer到最左边,设置成Fill,Spacer控件就是起到占位的作用.  

  7. html 之 <meta> 标签之http-equiv

    语法规则: <meta http-equiv=“参数” content=“参数值” > 1.X-UA-Compatible 文档兼容模式的定义 <meta http-equiv=“X ...

  8. jdbc链接数据库的url两种写法

    首先看下面两个jdbc的url 一:jdbc.url=jdbc:oracle:thin:@100.2.194.200:1521/abc二:jdbc.url=jdbc:oracle:thin:@100. ...

  9. 使用Go编写WebAssembly

    I. Install go 1. down https://golang.org/dl/ go1.12.3.windows-amd64.zip 2. set path (1) GOROOTvar na ...

  10. ARM920T的Cache

    转载自:http://www.eefocus.com/mcu-dsp/242034 ARM920T有16K的数据Cache和16K的指令Cache,这两个Cache是基本相同的,数据Cache多了一些 ...