找到config文件夹下的index.js文件修改一下位置

看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’

在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置

最后，重新npm run build一下，就可以访问成功！

vue打包空白，图片没加载，背景颜色没有渲染出来-配置秘诀的更多相关文章

  1. Vue实现一个图片懒加载插件（转载）

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  2. vue + vue-lazyload 实现图片懒加载

    1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...

  3. Vue中图片的加载方式

    一.前言 VUE项目中图片的加载是必须的,那么vue中图片的加载方式有哪些呢,今天博主就抽点时间来为大家大概地捋一捋. 二.图片的加载方法 1.在本地加载图片(静态加载) 图片存放assets文件夹中 ...

  4. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  5. vue图片预加载

    目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 一.方法一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程 ...

  6. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  7. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

  8. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  9. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

随机推荐

  1. TestNG方法測试及注意要点 代码及配置具体解释(解决testng方法不运行问题)

    教你解决为什么TestNG中方法加了@Test注解,也在配置文件里配置了,可是方法就是不运行! 在使用TestNG进行測试时,使用配置文件的方式更easy于维护.可是常常遇到明明方法写了也配置运行了, ...

  2. java Socket Tcp 浏览器和服务器（二）

    package cn.itcast.net.p2.ie_server; import java.io.IOException;import java.io.InputStream;import jav ...

  3. apache并发测试工具ab为什么测不准

    apache并发测试工具ab为什么测不准 发表于2年前(2013-03-21 12:13)   阅读(1146) | 评论(1) 1人收藏此文章, 我要收藏 赞0 3月21日 深圳 OSC 源创会正在 ...

  4. iOS-各种动画特效

    概述 广播跑马灯/弹幕/直播点赞/烟花/雪花等动画特效, 后续增加~ 详细 代码下载:http://www.demodashi.com/demo/10674.html 一.实现功能 1. 广播跑马灯 ...

  5. TaskMapper

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  6. Timer与AlarmManager的差别

    线程 通过调用Thread类的 start()方法来启动一个线程,这时此线程处于就绪(可执行)状态.但此时并没有执行,它须要CPU时间片. 一旦得到CPU时间片.就会执行run()方法. run()的 ...

  7. 原创：微信小程序页面跳转展示缓冲提示

    1.在JS文件中,直接加上下面代码即可: //缓冲提醒 wx.showToast({ title: '加载中', icon: 'loading', duration: 400 })

  8. PHP递归目录的5种方法

    <?php //方法一:使用glob循环 function myscandir1($path, &$arr) { foreach (glob($path) as $file) { if ...

  9. PHP-深入学习Smarty

    本文中的边界标签分别为"<{"和"}>" start-12, 都是静态模板中的内容, 即使函数也只是模板中的标签或者变量调解器; 13-end, 都 ...

  10. 在linux下安装并使用websocket

    前言 首先,对websocket要有一个简要的了解与认识 websocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议. 它基于TCP传输协议,并复用HTTP的握 ...