关于vue项目打包后部署到Tomcat后，background引用的图片路径错误的问题

最新推荐文章于 2024-03-29 02:52:42 发布
最新推荐文章于 2024-03-29 02:52:42 发布
阅读量1.3k 收藏
点赞数
文章标签： vue 打包 部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42541498/article/details/89515364
版权

css代码里使用里这样路径的图片： 

 background: url('../assets/images/bg-01.jpg') no-repeat;

打包过后bg-01.jpg会被打包到dist>static>img目录下。

  

打包之后background: url('../assets/images/bg-01.jpg') no-repeat; 会被解析为background: url('static/img/bg-01.9be8e15.jpg') no-repeat;

但是这行代码在css文件夹下，css文件夹css文件访问img文件下，需要返回上级目录。所以‘static/img/bg-01.9be8e15.jpg'目录是错误的。

解决办法：

在项目的build/utils.js文件里添加

 

 

this.name
关注
vue项目打包上传服务器 - vue-cli2 + vue-cli3 空白页，资源无法加载等常见问题解决
maindek的博客
03-13 2242
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些： 1、打包后将 dist 文件夹和 index.html 放...
Vue3.0项目---蜘蛛电影（解析）
weixin_43842821的博客
04-09 841
项目简介 蜘蛛电影主要是仿猫...
解决vue项目打包后提示图片文件路径错误的问题
08-27
主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
tomcat + vue打包部署，图片访问绝对路径设置
魅惑青花瓷
01-04 2382
vue vsCode打包 路径设置 1.部署tomcat，打包vue项目，将打包好后的项目放在tomcat的webapps下 2.设置图片访问路径，tomcat的conf的server.xml中，添加这一句 3.图片的保存路径是 4.图片的访问是 5.vue设置打包路径是在config目录下的index.js中 ...
Webpack打包css文件的背景图路径错误以及多生成了图片
Csdn_____c的博客
05-01 1070
module.exports = { entry:'.src/index.js', output:{ filename:'main.js', path:path.resolve(__dirname,'dist') }, module:{ rules:[ { test:/\.webp$/, use:[{ .
vue 打包css路径不对_vue-cli 打包后CSS background不显示，图片路径错误问题
weixin_39633437的博客
12-29 487
这个问题很多同学都会碰到，问题原因点我下面给出解决方案先看项目的的结构：在Solution.vue组件中，CSS里定义了background，图片路径使用相对路径，Solution.vue相对于img的路径为../assets[css].banner {width: 100%;height: 600px;padding: 140px 20px;-webkit-box-sizing: border-...
vue项目如何打包扔向服务器 - Hi-Sen - 博客园
最新发布
F1814397的博客
03-29 850
1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。1、项目目录结构。这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404 无法引入的问题。3、npm run build 打包后的文件。
学习coderwhy老师利用vue开发supermall
tangyuan的博客
01-27 7411
网络请求 request.js import axios from 'axios' export function request(config) { // 1、创建axios的实例 const instance = axios.create({ baseURL: 'http://', timeout: 5000 }) // 2、axios的拦截器 // 2...
javascript后面部分
Pwsifeng的博客
04-07 1064
day01-PHP语言 一、认识前后端 前端：用户可见的界面，数据展示在页面上给用户看到 后端：分为服务器端和数据库 服务器端：把前端要展示的数据存储到数据库中，前端需要时把数据库的数据再传递给前端 ​ （服务器端：我们学习php语言，php语言运行在apache服务器上） 数据库：一个存储数据的仓库（mysql），可以让后端进行数据的增删改查（mysql） 展示方面：前端之间看到，布局，图文，交互和特效。 ​ 后端没办法直接看到，数据存取，业务逻辑
vue打包静态资源路径不正确的解决办法
weixin_30733003的博客
11-03 1218
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个 1、js，css路径不对 解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 2、css中引用的图片资源找不到 我的login.vue文件中有一段css，其中引用了一个背景图片，是这样写的 .login{height:100%;backgrou...
VUE3前端笔记 正确引入外部CSS文件的图片路径
老富的博客
02-15 3947
VUE3前端笔记 正确引入外部CSS文件的图片路径方案一方案二 方案一 项目文件结构 showme.vue |----- dist |----- css |----- app.xxx.css |----- img |----- bg1.xxx.jpg |----- node_modules |----- public |----- src |----- assets |----- images |----- bg1.jpg |----- component
vue项目中 路径使用的@和~的区别
热门推荐
halo1416的博客
02-20 5万+
首先：@和~ 都是在路径访问时使用的。 1. @ 使用说明         @这是webpack设置的路径别名。         在build/webpack.base.conf这个文件里面定义。                vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。           默认定义：@这东西代表着到src这个文件夹的路径    ...
vue background-image路径下的图片打包后找不到的问题
u011295864的博客
11-22 4383
参考 https://segmentfault.com/q/1010000009700735 的解决办法。  
CSS大法----css样式表里面引用background-image时，url路径错误原因及解决方法
qq_36789311的博客
08-01 5895
CSS大法----css样式表里面引用background-image时，url路径错误原因及解决方法 一直对css中background：url的路径问题存在误解，半知半解的，有时候路径写的对，有时候又是错的，完全碰运气，今天写resume时又遇到这个问题，在此整理下： css文件夹下的index.css样式表中background要引入images文件夹下的guanggao.jpg图片。 ...
Taro scss background-image url路径报错
jessicafan0124的博客
07-14 712
taro scss background-image url路径报错
解决vue页面中background背景图404问题
CC的博客
06-24 3030
在 css中写background增加背景图片，会出现404错误，在css中可以这样写避免404： background: url("~@/assets/img/main-title.png") no-repeat; background-size: 100% 100%; 解释一下，@这是webpack设置的路径别名，代表src resolve: { alias: { '@': resolve('src') } } ~符号，是stylus-lo
vue动态加载图片地址时报错404的解决方案
weixin_57209852的博客
08-26 4629
vue中动态绑定图片报错404问题
vue项目使用background-image设置背景图报错的解决
bbt953的博客
02-17 5624
background-image: url("@/assets/images/loginbg.png"); // 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法: background-image: url("~@/assets/images/loginbg.png"); // 带~的路径会被webpack解析为require(src/assets/images/loginbg.png) ...
CSS中代码background:url(图片) no-repeat right center的意思
05-08 6199
最近在模仿一个网页的时候，发现CSS代码里有一行代码：background:url(图片) no-repeat right center不明白是什么意思，百度以后学习到了，在此记载知识点； 这一行代码其实是背景图定义形式的简写完整形式是：background-image:url(图片);background-repeat:no-repeat;background-position:ri...
Vue项目打包与Tomcat部署实战解析
通过以上步骤，可以成功地将Vue.js项目打包并部署到Tomcat服务器，同时解决了可能出现的常见问题。在实际操作中，可能还需要根据项目特性进行一些调整，但基本流程是相同的。熟悉这个过程对于开发者来说是非常重要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值