解决vue-cli打包时背景图片丢失问题

最新推荐文章于 2021-10-22 13:53:36 发布
最新推荐文章于 2021-10-22 13:53:36 发布
阅读量3.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端-css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/panling_dml/article/details/80089465
本文解释了Vue项目中背景图在打包过程中存在的问题：部分图片丢失。原因是Vue将小图片转为Base64，而较大图片则保持原链接，但打包后路径变更导致无法找到这些图片。文章提供了build/utils.js配置修改方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需要更改build/utils.js的配置，如图

至于为什么背景图有的打包后存在，有的丢失，那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了，直接引，而背景图片里用的是相对路径最后会直接替换成static，但是明显路径会有问题，所以得配置下

vue-cli 打包后element图标异常不显示问题
前端程序员、项目经理、人工智能博主
12-04 2204
vue打包后如下element图标不显示 控制台报错 显示没有找到element-icons资源 解决办法： 在build文件下的utils.js文件中添加这一句publicPath:’…/…/' 找到我如下代码中去添加 // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return Ex
vue build本地预览与路由History模式下页面空白
qq_45576685的博客
03-09 944
vue build本地预览与路由History模式下页面空白和图片路径找不到前言一、本地模拟服务器测试二、启动我们的本地预览服务器,执行npm run xx 类型的命令 vue build本地预览与路由History模式下页面空白和图片路径找不到 前言 不知道有没有前端小白和我一样，遇到同样的问题 vue 路由mode:‘history’ 模式下，开发环境页面可以正常访问，但是打包后本地测试出现问题（有没有人和我一样，本地测试也不会的，以前hash模式下，直接把dist文件夹下的index.html从浏览
{项目解决问题} vue-cli 打包 背景图片丢失问题及修改打包图片上限
酱子
11-08 456
Vue 打包后背景图片不显示问题 build/utils.js增加 function generateLoaders (options) { if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', // 写改css中的路径 publicPath: '....
vue CLI 3.9.0版本打包时index主页空白及图片丢失的情况（精简有效）
weixin_42822484的博客
08-03 597
vue CLI 3.9.0版本打包时index主页空白的情况        看很多文章写的都是vue CLI2.x的操作方法，虽然部分也说3.x的了，但是里面的配置信息繁多，不知道要添加哪些，修改哪些。        首选说vue CLI 3.x版本已经没有c...
vue打包后没图片小图标
李程程的博客
04-19 411
vue打包后没图片小图标、小图标变成小方块1.修改build/utils.js文件2.修改config/index.js文件 1.修改build/utils.js文件 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', //加上这一条就好了 fallback: 'vue-style-loader'
vue-cli 打包出来的文件缺少_VUE-CLI打包时文件和图片路径不正确
weixin_31902781的博客
12-31 396
VUE-CLI创建项目后，本地npm run dev没问题。npm run build时却找不到css文件，js文件或是图片资源。修改以下几个配置文件：/build/utils.js约45行,添加publicPath:'../../'此处修改可以解决CSS内的背景图片路径不正确if(options.extract){returnExtractTextPlugin.extract({u...
解决vue-cli 打包后自定义动画未执行的问题
10-16
在使用Vue CLI进行项目开发并打包后，有时会遇到自定义动画无法执行的问题。这通常是由于打包配置不当导致的。为了解决这个问题，需要对Vue项目的打包配置进行修改。 首先，了解问题的背景非常重要。在Vue项目中，...
vue-cli中打包图片路径错误的解决方法
01-19
最近第一次使用vue-cli构建项目，第一次打包部署到服务器上的时候出现图片加载不出来，结合网上的方法，终于给摸索出来。将项目部署到服务器上分为两种：一种是直接部署到服务器的根目录，另外一种是部署到服务器的...
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader...
vue 在生产环境中找不到背景图片
周家大小姐
11-10 1214
 #修改build /utils.js中的配置  if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, // 背景图的时候使用 publicPath:'../../', fallback: 'vue-style-loader'...
vue-cli如何打包和图片上传丢失问题
weixin_41997724的博客
09-28 1055
vue项目的打包 需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./ 如下： build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Pa...
vue项目打包背景图片丢失，不显示问题
m0_46807881的博客
08-04 2198
项目打包后，背景图竟然消失了，找到好的解决方案： https://blog.youkuaiyun.com/qq_34611721/article/details/80996947
vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失
weixin_42467467的博客
03-03 3117
缘由 当开发vue项目时，ele字体图标显示无任何问题，然而当项目打包部署上线时，图片，字体文件等静态资源就丢失了，通过分析是因为项目打包时是非根目录，通过publicPath进行了配置，静态资源没有匹配到publicPath，因此打包出来的路径错误，导致页面不显示资源 分析 由于是打包至非根目录下，我们需要对webpack中的publicPath进行配置，同时记得修改router.js中的base地址 // 打包至非根目录下 // vue.config.js publicPath: "/tpls/vue/
vue项目打包后，在浏览器上的标题没有图标了？打包之后丢失ico图标丢失
qq_45067263的博客
07-02 4570
项目场景： vue项目打包后，在浏览器上的标题那里不显示图标， 本地显示图标正常： 打包之后查看：图标丢失，不显示 原因分析： 解决方案： 原因可能有很多种，一条一条筛： 1.打包后图片有没有在文件夹内 2.然后图片路径要对 3.看看打包之后的文件 路径对不对 4.图标可能有延迟需要等一会儿多刷一会儿也许就有了 下面看解决方法找到问题所在： 先打包测试，然后看打包完之后的文件里面能不能找到ico这个图标，没有的话那就说明路径配置错误 那就查看路径配置： 看自己的配置文件webpack.prod.
vue打包项目依赖文件丢失（CSS/JS/图片打不开问题）
从入门到放弃
08-11 3286
我们先解决css、js 依赖文件找不到的问题： 首先我们找到项目工程文件夹下的config ===> index.js 之后我们找到build对象的assetsPublicPath build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__...
关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题
weixin_46285310的博客
08-08 4002
今天进行打包之后遇到一个问题就是，打包上传到服务器里面，图片不显示，之后查了一下，最新的vue3里是这么进行配置的 打包： Vue项目创建好之后，右键在新终端中打开，注意一定要在项目的根目录里，输入npm run build 进行打包，等打包好之后，类似这样 左侧项目目录会出现一个dist文件夹，这就是你打包好之后的文件夹 当然你可以修改它的名称上传到服务器里进行访问，这就是打包 关于上传到服务器里显示空白和图片不显示怎么去做 网上大多都是有关于vue2及以下版本的配置，在build文.
vue打包之后静态资源图片失效问题
热门推荐
纸上得来终觉浅，绝知此事要躬行
04-13 4万+
1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入 的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2.解决方法之一 静态资源static存放位...
vue项目打包后，浏览器上显示的页面标题前图标不显示，打包之后丢失ico图标丢失
weixin_43185419的博客
10-22 2622
问题描述： vue项目本地运行时，页面标题前的图标可以正常显示： 打包之后却变成了： 原因分析： 图标丢失 打包后路径错误 解决方式： 图标丢失 打开打包文件： 可以看到图标还在，所以排除。 打包后路径错误 打开index文件，查看在当前文件夹下，路径指向的位置是不是错了。 比如我这里icon和index.html是放在一块的，路径写成了 <link rel="icon" href="../test.ico"> 指向根目录，打包后放在服务器下运行位置就不对了。 改成：
Vue-cli3.0 构建全功能前端框架详解及配置优化
1. Webpack打包扩展：vue-cli3.0中的webpack配置主要隐藏在@vue\preload-webpack-plugin中，开发者可以通过创建vue.config.js文件来扩展或自定义配置。例如，示例代码展示了如何设置生产环境下的基础url路径，并针对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值