webpack:url-loader打包后找不到图片、字体路径问题

项目在css中引用图片，打包之后找不到对应的图片和字体路径

打包配置文件的路径配置：project/config/index.js

对应的图片打包配置：project/build/webpack.base.config.js 其中utils.assetsPath为build.assetsSubDirectory => static 也就是超过10000的就不会被base64了，而是放到static下的img文件夹中，当前这个图片大小14.65kb超过最大限制，则会放在static/img下

打包后的图片存放位置

打包后的图片引用css代码：

这样一遍下来，大概就定位到问题，是因为引用的路径出问题了，找成了当前css文件下对应的static文件，实际应该是css外层文件夹下即可，但是文件打包此处static/img是改变不了的，所以要往上找两级../../，webpack打包的时候有个配置为publicPath，可以设置对应的公共路径设置成往上找两级即可

重新打包，正常显示yeah!

webpack:url-loader打包后找不到图片、字体路径问题相关推荐

vue dist打包后找不到图片路径
打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到: 说明引用路径错了,需要手动修改: 进入config/index.js 原配 ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
vue-cli中解决css引用图片打包后找不到文件资源的问题
1.在CSS中引入图片 #slider1 {background-image: url(./bg02.jpg);background-size: cover; } 注意:此处的图片与索引文件在同一个目 ...
webpack中将打包后的文件复制到指定路径
项目中有一部分使用了另一项目的打包文件,.每次打包后都需要手动复制此文件到现有项目中,讨厌得很,故查阅后 const path = require("path"); const C ...
Python项目打包后找不到路径问题，将资源文件数据文件打包到exe文件中
目录问题描述 Python项目打包后,找不到配置文件路径 1.冻结路径 2.使用方法将资源文件打包到exe文件中 1.打包前准备 2.返回临时路径 3.使用方法 4.编译打包问题描述 pyins ...
vue 打包后找不到路径
在打包后发现点开dist方件;浏览器中一片空白; 我们需要在config文件下的把 assetsPublicPath: "/", 变成: assetsPublicPath: &q ...
webpack代理配置打包后接口404_webpack 从零开始
什么是webpack? webpack 可以看做是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖 ...
vue组件中引入public文件，build打包后找不到资源报错404
在组件中我使用object标签预览pdf文件 <object width="100%" height="100%" data="/help/he ...

webpack:url-loader打包后找不到图片、字体路径问题

webpack:url-loader打包后找不到图片、字体路径问题相关推荐

最新文章

热门文章