资源相对引用路径

问题描述

一般情况下，通过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. leetcode-回溯②-难题

    题10: 回溯:另:动态规划复杂度更低 class Solution: def isMatch(self, s: str, p: str) -> bool: def helper(s,p): i ...

  2. shiro入门笔记之第一个demo创建

    前言 看到这篇文章之前,可能很多小伙伴都没听过shiro,那么shiro是什么呢?shiro是Apache基金会下一个非常有名的开源项目(项目官网: http://shiro.apache.org/ ...

  3. BZOJ 1927: [Sdoi2010]星际竞速(费用流）

    传送门 解题思路 仿照最小路径覆盖问题,用费用流解决此题.最小路径覆盖问题是拆点连边后用\(n-\)最大匹配,这里的话也是将每个点拆点,源点向入点连流量为\(1\),费用为\(0\)的边,向出点连流量 ...

  4. NX二次开发-用户自定义资源栏选项卡RegisterActivationCallback

    最近在研究UGOPEN文件夹里的例子,发现从NX10版开始可以用户自定义资源栏选项卡了,NX10以下也可以做,但是需要反编译DLL调内部函数,这个只有高手才会,我是不会弄. 以前看过有人把标准件库做到 ...

  5. 【UR #2】跳蚤公路

    [UR #2]跳蚤公路 参照yjc方法.也就是地铁环线那个题. 求每个点不在负环内的x的取值范围.然后所有1到j能到i的j的范围取交.得到答案. 每个边形如kx+b的直线,每个环也是 每个点不在负环内 ...

  6. wmic命令用法小例

    wmic就是wmic.exe,位于windows目录底下,是一个命令行程序.WMIC可以以两种模式执行:交互模式(Interactive mode)和非交互模式(Non-Interactive mod ...

  7. Navicat 连接MongoDB 查询语句

    https://www.cnblogs.com/viviman/archive/2012/11/21/2780562.html

  8. Http协议中get和post的区别 转载https://www.cnblogs.com/lexiaofei/p/http.html

    get(默认值)是通过URL传递表单值,数据追加在action属性后面. post传递的表单值是隐藏到http报文体中,url中看不到. get是通过url传递表单值,post通过url看不到表单域的 ...

  9. URAL 1748 The Most Complex Number

    题目链接:https://vjudge.net/problem/11177 题目大意: 求小于等于 n 的最大反素数. 分析: n <= 10^18,而前20个素数的乘积早超过10^18,因此可 ...

  10. 注解@Override

    Android的开发者对@Override肯定是非常熟悉,不管是自己的代码中还是书上都会出现,但是他是什么意思呢?如下: @Override是伪代码,表示重写(当然不写也可以),不过写上有如下好处: ...