vue项目npm run build打包发到服务器上，背景图片消失

最新推荐文章于 2023-07-19 14:42:45 发布
最新推荐文章于 2023-07-19 14:42:45 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： VUE 工作bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40664253/article/details/109319182
版权

vue项目打包后本地运行正常，但在服务器上看不到背景图片，网上搜索大概原因是因为路径的问题，部署到服务器上后找不到静态资源。
图片放在assets文件夹下，背景图片对应请求方式如下：
在这里插入图片描述

1.找到config下的index.js文件 将build下的assetsPublicPath的斜杠换成./ 操作如下
在这里插入图片描述
2.修改build/utils.js，添加publicPath:’…/…/’
在这里插入图片描述

乙只
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决：vue项目npm run build 打包后 :src路径里面的本地图片找不到。
柠檬不萌只是酸i
09-23 4737
问题描述及错误代码： // 本地运行、打包 图片是ok的 <img src="../../static/images/orderSeeProgress0.png"> // 本地运行 图片是ok的、打包图片找不到 (因为图片的路径被解析成了字符串) <img src="/static/images/orderSeeProgress1.png"> /...
解决vue打包 npm run build-test突然不动了的问题
01-22
输入npm run build-test 突然停在这不动了 what? 不动了？！ 后来google了一下 大家都是人才 运行一下这句话 就动了！！ npm config set registry http://registry.cnpmjs.org 补充知识：vue_test_unit_e2e常见...
解决vue项目背景图不显示问题？
qq_41283061的博客
11-12 1913
问题1：打包后运行线上地址出现页面空白 解决：将绝对路径改为相对路径，config=>index.js下的 assetsPublicPath改为./ 问题2：打包后运行线上环境部分图片不显示（背景图等） 解决：build=>utils.js下的 publicpath改为…/…/ ...
关于npm run build 时dist文件下图片not found 的问题
qq_38401285的博客
08-27 1809
今天下午尝试将写好的静态vue项目build一下，原先image是放在src/assets路径下，最后生成的文件打开时是报错状态，最明显是图片not found 。后来终于解决了这个问题。 首先我把image文件放在pubilc里，相应地改变用到的图片的路径，然后新建一个vue.config.js文件，放在根目录下。注意！不是src目录下。 vue.config.js文件里写： 接着np...
【vue】vue项目build之后找不到资源文件
liuzhenhe1988的专栏
09-28 3510
前言 刚刚创建好的vue项目， 在执行npm run serve后，是可以正常看到页面内容的，但是执行npm run build之后，从文件夹dist中直接打开index.html,却什么也看不到，一片空白，找其原因是因为资源文件的路径都找不到了，下面将通过配置文件解决此问题 解决方案 1、在根目录下创建配置文件vue.config.js 2、在配置文件中写如下代码 module.exports = { publicPath: './' } 3、在目录dist中打开index.
vue 项目打包组件图片不见，不能跳转解决方法
HertzDL的博客
07-17 446
vue 项目打包组件图片不见，不能跳转解决方法 图片不见，解决方法 webpack的config/index.js里面的assetsPublicPath: '/' 这里的 ‘/’改成 ‘./’ 打开build/utils.js，在里面找到这个代码加入publicPath:"../../"，其中值可能会有不同，若不同，自己配置成相应的即可。 if (options.extract...
Vue项目打包---背景图片无法显示
JBL555的博客
04-17 1428
vue项目中经常会遇到给div设置背景图片，一般会在css中给对应div设置background-image：url(path),但是这个路径本地运行一般本地运行没有问题，打包后放到服务器上运行会发现背景图片无法显示了，查阅后发现这其实和webpack打包有关，要么不要在css中设置background_image，直接在标签中绑定style，例如 <div :style="{backg...
vue打包后 背景图不显示
蒲小若的博客
12-21 752
这两天做了一个项目，在做好登录之后进行打包放到服务器上，在本地跑的时候一切正常，但是在服务器上跑的时候发现登录页面的背景图没有了，是一片空白，为此找到了一下解决方案 在build 下的 utils.js中找到： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, ...
vue中Npm run build 根据环境传递参数方法来打包不同域名
12-12
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: ‘”dev”‘ 'use strict' const merge = require('webpack-merge') const ...
vue打包npm run build时候界面报错的解决
10-14
主要介绍了vue打包npm run build时候界面报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目,npm run build后,报路径错的问题
11-20
在build目录下的webpack.prod.conf.js里面： output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码，可解决该问题或者...补充知识：vue项目打包后，npm run build相关配置，以及解决
react打包后图片丢失_宜信技术实践｜指尖前端重构（React）技术调研分析
weixin_40007668的博客
11-23 169
一、为什么选择ReactReact是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。Angular出现最早，但其在原理上并没有React创新的性能优化，且自身相对来说显得笨重。Vue出现最晚，其核心原理学习了React，只是语法形式的变化，关系上来说React是开拓者，Vue是学习者。React社区有强大活力与创新能力，不断涌现革命性的创新产品，其中包括可以使用J...
vue打包找不到图片，图标等资源问题
xiasohuai的博客
07-03 4654
修改配置文件 config/index.js 原本内容为 '/'。没有小点； 解决的问题是：文档发布找文件路径是在当前路径下找相对路径，否则的话会找绝对路径 build/utils.js 【此处关键】解决的问题是：样式表里引入的背景图片原本会自动加入'static/css'。把背景图识别到了样式css的目录下加上词句后，就可以找到样式表外层目录； 需要注意的是：样式表里引...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2174
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
Vue 项目上传服务器后背景图片404
fuf_xyxnxss的博客
03-28 285
原因： 由于 vue 项目文件夹最终会打包压缩为 js 。当运行的时候，css 中的相对路径指向已经发生变化指向了根目录，所以出现加载错误的问题。 解决方案： 如果是用 vue-cil 构建，那么在 build 目录下找到 utils.js 中的 ExtractTextPlugin.extract({}), 里面添加 publicPath: ‘…/…/’, 之后重新打包上传即可。 ...
vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
weixin_30666401的博客
01-29 642
1、在上篇文章src配置及引入的基础上修改项目配置： 文章链接地址：https://www.cnblogs.com/hsl-shiliang/p/10333022.html。 2、具体配置过程如图： （1）、修改config文件夹下的index.js文件下的build对象下如下（修改 assetsPublicPath:'/' 为 assetsPublicPath:'./'）： （2）、...
vue2项目打包遇到的问题（记录）
最新发布
weixin_43939111的博客
07-19 950
临时纯手工搭建开发了个vue2小项目，打包后出现了很多问题。
npm start 启动之后图片加载失败
qq_30738155的博客
11-22 252
一个bug：打包后，使用npm start 之后图片加载失败
npm包中有图片等资源时无法加载
weixin_47359038的博客
03-20 2427
引用依赖包时无法加载图片等资源
vue npm run build打包之后项目打开一片空白
05-12
如果你在运行 `npm run build` 后，打开项目出现了一片空白的情况，可能有以下几种原因： 1. 路径问题：你的网站文件引用了打包后的文件，但是文件的路径不正确。检查一下你的文件引用路径是否正确。 2. 缺少依赖...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值