vue build打包后css里的图片路径404

在vue-cli项目中build/utils.js中找到如下代码块,添加 
publicPath:’../../’

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //添加这句话
})
} else {
return ['vue-style-loader'].concat(loaders)
}

css中引用的图片地址有问题,需要返回上两级目录,修改后重新打包即可

vue build打包后css里的图片路径404不正确的问题的更多相关文章

  1. 关于npm run build打包后css样式中的图片失效的问题(如background)

    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

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

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

  3. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  4. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  5. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  6. vue项目打包后图片路径问题

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

  7. vue --- cli build 后的项目,图片路径出错

    今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...

  8. Xcode: Run Script 的运用, 使build打包后自动+1

    背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...

  9. npm run build 打包后,如何运行在本地查看效果(Nginx服务)

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

随机推荐

  1. 蒲公英 Bug 管理云

    官网访问地址:https://www.tracup.com/ 优势地方: ①免费使用 现在免费,今后也一直免费. ②无需部署 网站采用云端部署,这也就意味着无需开发者自己搭建.部署,注册一个蒲公英账号 ...

  2. 在Centos7上安装配置ss-libev Proxifier

    http://note.youdao.com/noteshare?id=6f768652c33a64d6b8935eb08b10a213 servier:ss-libev client:ss+Prox ...

  3. 让Delphi XE5跟其他版本的Delphi共存 [转]

    找到Delphi XE5的安装根目录  ....  \Program Files (x86)\Embarcadero\RAD Studio\12.0\bin下的cglm.ini文件, 打开cglm.i ...

  4. 不可小视的String字符串

    String印象 String是java中的无处不在的类,使用也很简单.初学java,就已经有字符串是不可变的盖棺定论,解释通常是:它是final的. 不过,String是有字面量这一说法的,这是其他 ...

  5. spring 整合Junit学习

    测试一般是测试的局部功能,使用时需要自己写个测试相关的spring配置文件,比较费劲,所以常用的是纯配置的方式来实现测试. @RunWith(SpringJUnit4ClassRunner.class ...

  6. STL中erase()的用法

    erase()是STL提供的容器中比较常用的方法之一,它的功能是删除容器中的某些元素,其中它的函数原型如下: 1.有两个参数,且参数类型都是size_t型: string& erase ( s ...

  7. vc++使用cookie登录网站

    以http://www.idc816.com为例 效果图: 1)先登录获取cookie,再使用cookie获取用户信息 2)记录cookie,关闭程序后重新运行程序,直接获取用户信息 使用Fiddle ...

  8. Spring-framework应用程序启动loadtime源码分析笔记(三)——@KafkaListener

    org.springframework.context.annotation.ConfigurationClassParser.getConfigurationClasses()读所有@Configu ...

  9. CentOS6 配置静态IP

    1.首先配置网络连接方式 VMware选择编辑->虚拟网络编辑器->VMnet0桥接模式 2.配置网卡 vim /etc/sysconfig/network-scripts/ifcfg-e ...

  10. 廖雪峰Java4反射与泛型-3范型-3编写泛型

    编写泛型类比普通的类要麻烦,而且很少编写泛型类. 1.编写一个泛型类: 按照某种类型(例如String)编写类 标记所有的特定类型例如String 把特定类型替换为T,并申明 Pair.java pa ...