解决 vue-cli 打包后图片路径获取不到的问题

vue-cli打包css引用图片路径问题 将项目引用绝对路径改为相对路径,修改 build 中 assetsPublicPath : // config/index.js 'use strict' const path = require('path') const packageJson = require('../package.json') // 构建文件夹 const dir = 'dist/' + packageJson.name module.exports = { dev: { // Paths assetsS 阅读详情

摘抄博客:vue-cli打包后图片路径取不到的问题

1. 第一步
在config / index.js 文件中把assetsPublicPath 修改为 ./

在这里插入图片描述

2. 第二步

在 build / webpack.prod.conf.js 文件中,在output里增加 publicPath: './'
在这里插入图片描述

3. 第三步
虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build / utils.js文件里添加publicPath: '../../'

在这里插入图片描述

vue 项目打包时样式及背景图片路径找不到 问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到; 解决方法: 阅读详情

相关推荐

如何在软件复位后保留指定RAM区域的数据

本文主要介绍S32K144的RAM retention功能

北极熊的脖子(16605192620@163.com) 1万+

vue打包后图片路径错误

vue 打包后 static 中图片路径不对的问题 `template` 中 `img` 标签中 `src` `template` 中 `img` 标签中 `v-bind:src` 在做这个 vue-cms 项目时,npm run build 打包部署后,然后 访问 的时候,发现:图片不能正常的显示(包括背景图,logo 之类的),请求的路径都 404 了。我的图片都放在了 static/imag...

weixin_43837268的博客 2249

电子结构设计(EMD)十年知识总结

客官,你的面相是做结构设计的奇才~1. 材料选择【一出手的0.1s就败了】2. 钣金件设计【折来折去有啥难】3. 塑胶件设计【看着好复杂】4. 型材件设计【凭啥不让我设计】5. 电子结构(PCBA)设计【静电肿么要我背锅】6. 包装设计【要的就是金玉其外,败絮其中】7. 外观(工业)设计【好不好看,谁说了算】8. 标签设计【】9. 标准件选择【一个螺丝难倒英雄汉/提起螺丝,英雄气短】10. 计算仿...

wfeng86的博客 1569

【Vue】关于开发中本地图片加载失败的经验总结

关于vue网页的开发过程遇到本地图片加载失败的解决方法

NineWaited的博客 9707

Autodesk软件网络授权破解

Autodesk 全系列产品网络授权破解 此网络许可授权破解文件及方法适用Autodesk 绝大部分的产品, 安装网络许可证管理器Autodesk网络许可证管理器x64位官方下载地址( https://knowledge.autodesk.com/sites/default/files/file_downloads/nlm11.14.1.3_ipv4_ipv6_win64.msi ) Autod...

weixin_33919950的博客 8261

从零到一:AnythingLLM与Ollama的本地知识库搭建实战

本文详细介绍了如何使用AnythingLLM与Ollama从零开始搭建本地知识库,涵盖技术选型、环境部署、系统配置及优化策略。通过RAG技术架构,实现安全高效的文档管理与智能问答,特别适合企业及个人构建私有化知识管理系统。

weixin_29079643的博客 562

【前端小知识】vue的publicPath

publicPath配置 项目请求根路径配置 项目在打包后,需要改变访问根路径 在该目录下vue.config.js进行配置 // 项目根目录下的vue.config.js文件 export default { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } ...

马云 1440

CQE和SQE 以及 PQA和DQA的区别

‌:PQA聚焦产品全生命周期流程管理,DQA专注于设计阶段的质量控制。

a1809032425的博客 1904

vue-cli项目打包后大图片(背景图)路径不对的解决方案

vue-cli在npm run dev的时候可以访问到图片。 但是打包后会发现,一些大的背景图访问路径不对,直接访问到static/css/static/img,而我们打包到图片是放到static/img中的, 也就是之际上多访问了/static/css 解决方案 直接在build/utils.js文件中添加 publicPath: '../../' 添加位置如下图 ...

YanGo的博客 1050

GPS天线结构、原理、测试

【有源陶瓷天线构成】GPS天线是由接收天线和前置放大器两个部件组成。GPS接收天线的作用,是将卫星来的无线电信号的电磁波能量变换成接收机电子器件可摄取应用的电流。绝大部分内置GPS天线为右旋极化陶瓷介质,其组成部分为:陶瓷天线、低噪音信号模块、线缆、[接头](h

数字世界 万物互联 2万+

Android车载蓝牙开发全攻略:从基础到高级优化

本文系统介绍了Android车载蓝牙开发的核心技术与实践指南。文章首先阐述了蓝牙在智能汽车中的关键作用,包括免提通话、音频流媒体等应用场景。随后详细解析了蓝牙协议基础,重点介绍了HFP、A2DP等车载常用协议。开发实战部分提供了设备发现、连接、数据传输的完整代码示例,并融入多线程和内存优化技巧。通过真实车载案例,展示了启动时间、流畅度和资源使用的优化策略。最后针对面试需求,提供了专业的技术问答,涵盖蓝牙开发全流程。全文紧密结合Android车载开发职位要求,为开发者提供了一套完整的蓝牙技术解决方案。

郑伟强dev的专栏 119

vue打包后图片找不到情况

打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件(图片路径失效)的问题) 配置文件二:config>>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 打包好后双击index.ht...

weixin_33862188的博客 1545

Kimodo 入门教程(一)英伟达开源人形机器人动捕数据集训练运动学动作扩散模型

Kimodo是一个基于700小时商用光学动作捕捉数据集训练的运动学动作扩散模型,能够生成高质量的人体和机器人3D动作。该模型支持通过文本提示和多种约束条件(如关键帧、末端执行器位置等)进行控制,并提供数字人类和类人机器人两种模型变体。安装方式包括软件包安装和源代码安装两种,需要配置HuggingFace令牌以访问文本编码器。推荐使用GPU加速,最低需要17GB显存。项目提供命令行生成和交互式演示两种使用方式,演示程序支持时间轴编辑和实时3D可视化。模型分为商用友好版和受限版,其中SMPL-X版本需要额外申请

2506_90492529的博客 1929

vue-cli中css引入图片打包路径问题

问题 开发模式 图片路径(存储文件夹) src |__assets |__img |__css |__js 这是我在css中引入图片的写法,在开发模式中是ok的 base.scss $icon_url :'../img/icon.png' ; .logo{ background:url('../img/login_logo.png'); } 打包后 这里就发现这个路径在cs...

天空影 6243

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题

几种设置publicPath后,再对比打包后的index.html文件 测试背景: 每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录 部署的时候,前端打包的文件部署在服务器的一个静态资源目录下 我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内,都需要前端正确设置publicPath才能正确访问的。 打包后的文件目录: ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时,既设置为'',部署后请求

一键写代码的博客 2万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Vue图片路径问题(动态引入:绝对路径、相对路径),require动态路径问题

Vue 图片动态加载问题,require 导入使用变量问题,Vue打包前后文件夹目录比较

weixin_45768768的博客 5万+

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Vue打包为相对路径

对于更复杂的部署需求,可以编写自定义脚本来处理资源路径。通过上述内容,我们不仅了解了如何在Vue项目中配置打包输出的资源文件路径为相对路径,还学习了如何解决常见的问题及一些实用的技巧。希望这些内容能够帮助你在实际开发中更好地管理和配置应用的资源路径。欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 2933

vue-cli 打包之后图片引用路径问题以及vue cli 使用npm run dev 报错Cannot GET /

1、vue-cli打包后 的dist文件中图片路径错误 按理说,这个img的路径应该是https://xxxxxxxxxxxxxx/dist/static/img/xxx.xxxxxx.png,但是很明显路径就成了https://xxxxxxxxxxxxxx/static/css/static/img/xxx.xxxxxx.png,图片路径多了两层。 其实很简单。打开/build/utils.js...

ya_nan_zhang的博客 1938

vue项目打包publicpath_Vue项目打包路径问题

最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。关于vue.config.js文件:这个文件的配置主要是用来设置打包的文件相关信息的命令:npm run build,而调试模式npm run serve,只不过是是对build到内存后,再次启动到node服务器。在调试模式下,这个文件的更新并不会因为ctrl...

weixin_39915700的博客 4994

Vue-cli 图片处理路径问题

Vue-Cli 顾名思义是Vue开发的脚手架,因此作为一个架构,了解内部的执行机制也是十分有必要的。 说白了,就是整合了webpack的一个脚手架,打包的一个流程,今天主要说一下webpack图片处理的机制 通常在项目中,图片的路径一直是一个困扰前端开发的问题,图片可以是相对路径和绝对路径两种,那么到底 在实际的开发中如何引用,就要取决于你对webpack打包图片机制的了解。 1.图片...

qq_36010298的博客 2059

vue-cli打包上线遇到各文件找不到问题——引入

在做VUE-cli WebPack脚手架项目打包完成后,在服务器上运行发现,有些js中定义的变量找不到,css,背景图片资源等都找不到,原来发现项目打包后的CSS和JS的引用路径是绝对路径,项目部署后会将静态当成根目录,就造成了文件引用路径的错误,解决方法是通过修改配置文件,将绝对路径改为相对路径,从而达到资源的相对引用。 一、‘/’指的是项目的根目录 ,’./’指的是当前目录 1.publicP...

qq_45668489的博客 1554

Vue 项目打包后路径问题的解决方法

Vue 项目打包后路径问题通常由静态资源路径错误、路由路径错误、环境变量路径错误或publicPath配置错误引起。通过正确配置静态资源路径、Vue Router 的base选项、环境变量、publicPath配置以及使用相关插件,可以有效解决这些问题。希望本文的介绍能帮助你在 Vue 开发中更好地处理打包后的路径问题,确保项目在生产环境中的正常运行。最后问候亲爱的朋友们,并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战(微课视频版》

有我更精彩的博客 2768

vue服务器打包显示图片,vue-cli中打包图片路径错误的解决方法

我们在项目打包的过程中,可能经常会遇到图片路径错误的问题,下面请大家随爱站技术频道小编一起来了解vue-cli中打包图片路径错误的解决方法吧!最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来。将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下1.我们首先来说部署到根目录下 就是比如:w...

weixin_29843603的博客 2009

vue-cli 打包之后图片引用路径问题

过完五一,感觉整个人跟废了一样,虽然五一期间也没做什么,就是感觉累,感觉困。但无奈今天还有一堆事情等我去做。 早上来先发了一版v5.0.1,开启项目新版的第一次!但是毫无疑问,出了很多问题,除了上次打包后js、css路径错误问题(详情请见:https://blog.youkuaiyun.com/AmberWu/article/details/79529363),这次出现了图片undefined的问题。 ...

AmberWu 4938

vue webpack打包后图片、js、css路径错误的完美解决方法

项目用rundevbuild打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。

weixin_56242672的博客 5154

vue-cli打包后文件路径错误解决方案

使用vue-cli构建的项目打包后字体图标路径错误 预计路径是 xxx/static/fonts/icomoon.xxxxx.woff 实际情况却是这样的 xxx/static/css/static/fonts/icomoon.xxxxx.woff 刚开始碰上这种情况很懵逼 不知道怎么解决 每次打包后都要去手动改路径 后来研究了一下 发现是因为改了config目录里面的index.js build...

夜伴钟声丶的博客 1943
上一篇: js 通过navigator.userAgent 判断不同类型浏览器
下一篇: css布局两边固定中间自适应
haogemr
博客等级 码龄9年 71粉丝 87原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值