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打包后背景图片路径错误问题的更多相关文章

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

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

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

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

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

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

  4. vue打包空白及字体路径错误问题

    vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...

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

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

  6. vue上线后,背景图片路径错误

    build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...

  7. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  8. 解决vue项目打包后背景图片找不到的问题

    在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../",

  9. vue项目在webpack打包后背景图片显示不了

    加上 publicPath:'../../'即可

随机推荐

  1. 利用ObjectMapper readValue()和泛型解决复杂json结构

    import com.dj.fss.vo.MessageListVO; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; im ...

  2. VC:UI编程

    VC++中给对话框设置背景图片的方法 -----------------------------------------------------方法一(铺满窗口)------------------- ...

  3. 在mac下做web开发,shell常用的快捷键

    Ctrl + A 光标移动到行首 Ctrl + E 光标移动到行末 Ctrl + K 清屏(也可是用clear命令) Command +shift+{} 终端的tab左右切换

  4. redis的安装总结

    1. 下载redis安装包:> 可以用命令: wget http://download.redis.io/releases/redis-5.0.5.tar.gz, 或者直接从官网下载.2. 解压 ...

  5. 08私有化、MRO顺序

    一. 私有化 1)xx: 公有变量 2)_x: 单前置下划线,私有化属性或方法,from somemodule import *禁止导入,类对象和子类可以访问 3)__xx:双前置下划线,避免与子类中 ...

  6. BZOJ 3144 切糕 最小割

    题意: 一个矩阵,每个格子分配一个数,不同的数字,代价不同,要求相邻格子数字差小等于d 求最小代价. 分析: 我猜肯定有人看题目就想到最小割了,然后一看题面理科否决了自己的这个想法…… 没错,就是最小 ...

  7. 【2019 1月集训 Day1】回文的后缀

    题意: 给定 n,s,求有多少个字符集大小为 s ,长度为 n 的字符串,使得其不存在一个长度大于 1 的回文后缀. 答案对 m 取模. 分析: 考场见到计数题的链式反应,想写暴力—>暴力难写— ...

  8. 笔试算法题(06):最大连续子数组和 & 二叉树路径和值

    出题:预先输入一个整型数组,数组中有正数也有负数:数组中连续一个或者多个整数组成一个子数组,每个子数组有一个和:求所有子数组中和的最大值,要求时间复杂度O(n): 分析: 时间复杂度为线性表明只允许一 ...

  9. jquery data属性 attr vs data

    html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery ...

  10. 【笔记】搭建OpenWrt编译环境

    参考书目<B智能路由开发指南> 目标:搭建一个OpenWrt编译环境,可以同时在家里和公司使用. [2018-09-13] 刚开始想用自己的电脑共享远程桌面,但不知道什么原因搞不定,所以干 ...