问题： 在使用npm run build 打包后， 如果在页面中使用img标签引入，打包后的路径是由index.html开始访问的，真正访问的是Static/img/图片名， 是正确的， 但是写在css 中的background: url("../../assets/***.png") 0 0 no-repeat; 引入的图片，打包的图片却访问不到，因为在css目录下并没有static目录，所以此时要先回退两层到根节点处才可以正常获取图片

解决办法： 打开build/utils.js, 找到generateLoaders方法，

如果里面没有publicPath，添加

publicPath:'../../'

如果有publicPath修改为

publicPath:'../../'

vue打包成app后，背景图片不显示的更多相关文章

  1. vue打包成app后，点击手机上的物理返回按钮后直接退出app

    在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 ...

  2. vuejs项目打包成APP后，首页不显示

  3. vue项目再HBuilder打包成app后，有ui模块未添加的弹窗

    直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的

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

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

  5. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  6. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  7. 使用HBuilderX实现打包vue项目成app

    一.准备开发工具 开发工具:HBuilderX 官网地址:http://www.dcloud.io (标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版) ...

  8. vue打包dist文件时，图片找不到

    1.vue打包dist文件时,图片找不到,无法像在本地一样查看 问题描述: 本地代码:<div class="icon"><img :src="'../ ...

  9. PHP写的手机端网站，可以打包成app吗，怎么打包？

    8:13:36 沐歌-重庆 2018/1/19 8:13:36 PHP写的手机端网站,可以打包成app吗,怎么打包 风太大-淮安 2018/1/19 8:14:58 变色龙 沐歌-重庆 一般用什么打包 ...

随机推荐

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习：作用域

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. expdp远程导出oracle库

    1.手动在本地建目录 E:\lvchengData 2.执行命令 create or replace directory data as 'E:\lvchengData\'; 3.为本地system用 ...

  3. ArchLinux安装Gnome桌面

    给Arch安装Gnome桌面美化及常用软件配置 一.创建普通用户 1.安装zsh 个人比较喜欢的一个shell,你们可以和我不同 # pacman -S zsh 2.创建用户 kain是我创建用户的名 ...

  4. python try-except处理异常的常用方法分析

    在写python程序时遇到异常想要进行处理时,可以使用try-except来处理,例如: try: 语句1 语句2 . . 语句N except .........: do something ... ...

  5. C++ 模板练习1

    //特定的模板友元关系 #include "stdafx.h" #include <iostream> using namespace std; template< ...

  6. Tensorflow学习教程------Fetch and Feed

    #coding:utf-8 import tensorflow as tf #Fetch input1 = tf.constant(3.0) input2 = tf.constant(1.0) inp ...

  7. eclipse中tomcat添加或移除web项目出错，显示无资源能被添加或移除

    错误截图 之前一直都能正常使用,今天莫名其妙出现这个错误 解决办法 https://blog.csdn.net/u012956987/article/details/79134474 右击项目,在属性 ...

  8. 第一个eclipse maven项目！我超全！

    前言:以前一直用idea做东西,今天突然想试一下,没想到配置起来是真的麻烦!!!!会出现各种各样的问题,太晚了,本文只做出几处非常严重的问题,如有疑问,请私信,留言 准备:本文     JDK 1.8 ...

  9. 新浪SAE云平台下使用codeigniter的数据库配置

    新浪SAE云平台下使用codeigniter的数据库配置 投稿:shichen2014 字体:[增加 减小] 类型:转载 这篇文章主要介绍了新浪SAE云平台下使用codeigniter的数据库配置,主 ...

  10. 干货 | 利用京东云Web应用防火墙实现Web入侵防护

    摘要 本指南描述如何利用京东云Web应用防火墙(简称WAF),对一个简单的网站(无论运行在京东云.其它公有云或者IDC)进行Web完全防护的全过程.该指南包括如下内容: 准备环境 在京东云上准备Web ...