怎么解决vue打包后静态资源图片失效的问题

配置Webpack Public Path
最新推荐文章于 2024-02-24 15:25:12 发布
原创 最新推荐文章于 2024-02-24 15:25:12 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Webpack配置文件中正确设置publicPath，确保静态资源路径正确加载。通过修改config/index.js和build/utils.js中的assetsPublicPath，实现资源路径适配。

找到 config->index.js里面
在这里插入图片描述
找到 build->utils.js
在这里插入图片描述
设置assetsPublicPath将assetsPublicPath:"/" 改成 assetsPublicPath:"./" 。
加publicPath:"…/…/"

Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
🏆 前端领域优质创作者
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 2622
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
解决vue打包之后静态资源图片失效的问题
08-28
下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 项目打包图片没有打包进去问题解决
jiangjunyuan168的博客
02-24 3966
vue 项目打包，项目中引用了的图片没有被打进包里，导致打包后的项目图片缺失。
怎么解决vue打包后静态资源图片失效的问题？，那又怎么解决动态设置img的src不生效呢？
qq_42353989的博客
07-28 1035
1.找到config/index.js配置文件，找到build打包对象里的assetsPublicPath属性，将默认值：'/'，修改为：'./'。 2.因为动态添加的src被当做静态资源处理了，没有进行编译，所以要加上require。 <img :src="require('@/assets/images/xxx.png')" /> ...
基于vue打包后字体和图片资源失效问题的解决方法
08-27
本文将详细介绍如何解决Vue打包后字体和图片资源失效的问题。 首先，我们来看一下`font-awesome`字体失效的问题。`font-awesome`是一个流行的图标库，它通过CSS来加载Web字体。在Vue项目中，如果你直接在CSS文件中...
vue webpack打包后图片路径错误的完美解决方法
10-17
然而，图片等静态资源的路径通常是相对的，这在开发环境中工作良好，但在生产环境（经过Webpack打包）中，由于静态资源被移动到一个新的目录（例如`static`），原来的相对路径就会失效。 当使用`npm run build`命令...
解决vue打包之后静态资源图片失效
np918的博客
07-30 1541
一、 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的 实践证明这个写法是错误的，这个会在你打包的时候直接抱一大堆错（如css-loader错误），连项目都跑不起来。 于是我用下面的写法： 这种写法也是不可以的，原因是...
vue 打包之后拿不到 原先 static 文件里的 图片
热门推荐
dongcehao的博客
03-30 1万+
vue 打包之后拿不到 原先 static 文件里的 图片关于vue 打包是一个 困扰了很多初学者的问题，当然包括我。不过vue-cli 已经优化的很好关于路径问题，百度上有很多，就是在修改：这个文件下的  build: {    // Template for index.html    index: path.resolve(__dirname, '../dist/index.html'), ...
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
问题 吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于发现了一个重要的点： 所有涉及到路径的地方全都是以 / 开头的 下面是吾辈打包后生成的 dist 目录 dist:. │ index.html │ └─static ├─css │ app.b7bce283257fbd427fb1dc3fea80cee1.css │ app.b7bce283257fbd427fb1dc3fea
vue 项目打包组件图片不见，不能跳转解决方法
HertzDL的博客
07-17 605
vue 项目打包组件图片不见，不能跳转解决方法 图片不见，解决方法 webpack的config/index.js里面的assetsPublicPath: '/' 这里的 ‘/’改成 ‘./’ 打开build/utils.js，在里面找到这个代码加入publicPath:"../../"，其中值可能会有不同，若不同，自己配置成相应的即可。 if (options.extract...
vue系列---项目打包找不到图片路径
yyjourney的博客
01-22 4060
在测试环节发现有图片找不到，发现是图片路径没有写对。 报错如下： 原代码： "/src/assets/img/arrow.png" alt="" class="col-step"> 这种引入图片的方式是错误的，虽然在页面展示的时候会出现，但是在打包后就会出现编译问题，src是无法编译的。 正确的引入格式： 第一种： img src="../../assets/i
关于Vite打包项目后图片丢失的解决方法
m0_73845616的博客
03-23 1万+
这种方法有一个缺点，当图片资源特别多时会很麻烦，需要先创建一个脚本，将所有需要的资源引入进来，然后以数组的形式导出，最后再通过遍历的形式去使用。官网我只是看了一个大概，总结出这两种方法，如果大佬们不喜欢用可以自己研究一下，然后大家一起分享吧，哈哈哈哈！在使用Vite脚手架开发项目时，打包后的项目会出现图片、图标等静态资源丢失问题。目录当中，打包后会将img文件夹一同打包进项目，如dist文件夹中所示。目录中，但是经过打包后img文件夹并没有出现在打包后的项目（
vue3 + vite 动态引入不被打包的静态资源
listener_life的博客
05-30 3268
vue3 + vite 动态引入不被打包的静态资源
vue项目打包问题汇总(vue-cli2.0)
qq_34465778的博客
03-28 320
一、打包后打开页面一片空白 原因一：dist目录中文件引用路径不对 解决方法： 将config > index.js 中 build模块的 assetsPublicPath路径设置为 ‘./’ build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), ...
关于vue打包后图片路径找不到的问题
weixin_30479905的博客
08-07 5057
//asserts引入的静态资源是相对路径 //而static引入静态资源时必须是绝对路径 slides: [ { //当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源， //将图片作为模块加载进去 src: require(‘../../../asserts/img/pic1.jpg’), ...
vue3+vite项目使用本地图片打包后不显示
Handsome_gir的博客
01-06 3320
vue3+vite项目使用本地图片打包后不显示。
vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法
lth002的博客
09-21 2293
【代码】vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法。
vue前端静态资源图片
最新发布
03-18
好的，用户的问题是关于在Vue前端项目中如何正确引入和使用静态资源图片。我需要结合提供的引用内容来整理回答。首先，用户可能想知道不同方式引入图片的方法，比如在Vue3+vite项目中的处理方式，以及传统Vue项目的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值