资源相对引用路径

问题描述

一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。

但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。

解决办法

打开webpack.prod.conf.js

找到output：增加 publicPath: './', 即可，如图。

那么这样后，资源的引用路径就正确了。

当然在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用。

背景图片的引用问题

上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，图片资源是通过css加载的，如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：

url(../../static/img/logo-index.2f00bf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码，如图所示：

添加如图所示的一行代码，这样不论是字体还是图片的引用问题都能解决。

 

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

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

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

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

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

  3. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  4. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...

  5. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  6. vue中打包后vendor文件包过大

    vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...

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

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

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

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

  9. 前端（以Vue为例）webpack打包后dist文件包如何部署到django后台中

    由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢? 1.打包后文件包dist 进入到 di ...

随机推荐

  1. Collections 工具类常见方法

    Collections 工具类常用方法: 排序 查找,替换操作 同步控制(不推荐,需要线程安全的集合类型时请考虑使用 JUC 包下的并发集合) 排序操作 void reverse(List list) ...

  2. springcloud feign增加熔断器Hystrix

    1.依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>s ...

  3. leetcode-161周赛-1247-交换字符使得字符串相同

    题目描述: 自己的提交: class Solution: def minimumSwap(self, s1: str, s2: str) -> int: count = {"xy&qu ...

  4. Jmeter-【If控制器】-__jexl3函数&__groovy函数

    一.使用场景 根据请求返回结果中某一字段的取值判断往下走的流程.例如: 二.__jexl3函数实现 格式:${__jexl3(,)} 三.__groovy函数实现 格式:${__groovy(,)}

  5. 树形dp+贪心+增量法+排序——cf1241E(好题)

    /* 给定一棵树,每个结点最多选和其相连的k条边,问使边权和最大的策略 dp[u][0|1]用来表示u没连父边|连了父边 时u子树下的最优解 如果u不和任意一个儿子连边,那么u下的收益是tot=sum ...

  6. IDHTTP

    Delphi IDHTTP用法详解 一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接 ...

  7. Django--实现分页功能，并且基于cookie实现用户定制每页的数据条数

    # page_num 当前页数, total_result_num 总共有多少条测试结果 def pagination(request, page_num, total_result_num, res ...

  8. CSS：CSS padding（填充）

    ylbtech-CSS:CSS padding(填充) 1.返回顶部 1. CSS padding(填充) CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的 ...

  9. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  10. Java内存通道

    对文件执行I/O的另一种方法是将文件的一个区域映射到物理内存,并将其作为内存数组.可以使用MappedByteBuffer来执行内存映射文件I/O. 要使用内存映射文件I/O,请为文件获取FileCh ...