tomcat + vue打包部署，图片访问绝对路径设置

最新推荐文章于 2024-06-03 15:47:47 发布
最新推荐文章于 2024-06-03 15:47:47 发布
阅读量2.3k 收藏
点赞数
分类专栏： 前端 文章标签： vue tomcat
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshimeihuo/article/details/85772751
版权

vue vsCode打包 路径设置

1.部署tomcat，打包vue项目，将打包好后的项目放在tomcat的webapps下
2.设置图片访问路径，tomcat的conf的server.xml中，添加这一句
tomcat的conf的server.xml中，添加这一句

3.图片的保存路径是
在这里插入图片描述

4.图片的访问是
在这里插入图片描述

5.vue设置打包路径是在config目录下的index.js中
在这里插入图片描述

魅惑青花瓷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springMVC+vue+Tomcat
qq_40738827的博客
04-06 914
前提： IDEA编写spingMVC代码，vue前端代码，实现前后端分离 如何跨域访问是一大难题，前端请求http一个网址，这个网址在idea后端中已经编写为特定的动作（控制器Controller） - 前端vue 在main.js文件中： import VueResource from 'vue-resource' Vue.use(VueResource) 对应的login.vue中（...
tomcat部署springboot+vue.doc
04-22
在现代Web开发中，SpringBoot和Vue.js的组合...总结，部署SpringBoot+Vue应用到Tomcat涉及后端WAR打包、前端Vue构建、Tomcat配置修改以及处理跨域问题。理解并掌握这些步骤，将有助于你在实际工作中流畅地部署Web应用。
关于vue项目打包后部署到Tomcat后，background引用的图片路径错误的问题
小仙女的博客
04-25 1281
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; 会被解析为backg...
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
最新发布
Zhangwei557的博客
06-03 926
2、解压tomcat文件,可以通过快捷键(command+shift+G)把它放入/Library(资源库中)在 Tomcat 下 webapps→test（test项目文件名）→创建WEB-INF→创建web.xml。6、npm run build后生成dist文件，放到tomcat中webapps中，以labo为例。5、开启Tomcat，终端输入sudo sh ./startup.sh，输完回车。至此两个问题解决完成！4、授权bin目录下的所有操作：终端输入。3、在bin目录下打开终端。
Vue工程打包部署Tomcat，解决404、静态路径等问题
Young-weiai
04-20 3178
通常使用nginx部署会少很多麻烦，但是部署环境通常也不是开发程序员能够决定的。Vue部署Tomcat所遇到的静态文件问题、刷新问题通过以上配置修改，基本都能解决。解决不了的，欢迎留言讨论~
tomcat部署vue项目（成功版）
热门推荐
凤舞九天的博客
12-01 1万+
1、tomcat介绍 2、下载tomcat 3、启动tomcat 4、打包vue项目 5、tomcat部署vue项目 1、tomcat简介 tomcat 是免费的web服务器。不使用tomcat也可以打开html页面，但是可以在浏览器的地址里看到file:d:/test.html这样的格式，是通过打开本地文件的形式打开的。使用tomcat后，可以这样127.0.0.1:8080/test.html像访问一个网站似的，访问一个html文件了。 2、下载tomcat https:/...
vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决
weixin_42120997的博客
06-21 1546
前言Vue是什么，是一套构建用户界面的渐进式框架(官网解释)，什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。Vue是近两年来比较火的一个前端框架(渐进式框架吧)，本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看吧。正文：在页面中使用...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...
spring boot项目和vue一起放在tomcat部署
11-13
在上面的配置中，我们添加了一个名为 "/bbsb" 的 Context，该 Context 的部署路径是 "D:\\apache-tomcat-8.5.32\webapps\bbsb"，并且该 Context 是可 reload 的。 访问日志的配置 在 Tomcat 服务器中，我们可以...
vue 接口请求地址前缀本地开发和线上开发设置方式
11-20
开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/prod.env.js 'use strict' const merge = require('webpack-merge')
Vue-cli打包后部署到子目录下的路径问题说明
10-14
主要介绍了Vue-cli打包后部署到子目录下的路径问题说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue部署到tomcat服务器
blaze_jack
09-30 262
操作系统为centos 首先安装tomcat，执行 yum -y install tomcat 之后启动 systemctl start tomcat.service 查看启动状态 systemctlstatustomcat 安装完之后访问8080成功即可。 在vue执行 npm runbuild 会在项目根目录生成dist文件夹 将dist文件拷贝到...
vue项目部署方式:tomcat部署和nginx部署
CnNoter
03-15 1414
LINUX 发布 VUE项目 关于vue部署 1.nginx转发 一般项目前后端分离得话，都会用nginx作为反向代理转发的。 因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理. 参考:vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件？ nginx配置p...
vue脚手架+Tomcat（servlet）发生跨域问题如何解决？
weixin_42508683的博客
02-05 2183
vue脚手za架+Tomcat（servlet）发生跨域问题如何解决？
Tomcat绝对路径资源访问问题
Rover的博客
02-02 898
该文章是飞升飞博主原创内容 原博客地址: 链接: 点击跳转原博客地址 最近，在进行web项目开发时，我遇到了一个关于项目前端图片资源访问路径的问题。如果此时将图片资源直接放置在项目内，再使用相对路径访问，问题当然是能够解决，但是随着项目的进行，这样做会导致项目空间不断增大，而且项目的可移植性也会变差，还有安全性的问题。所以，这种方法我们不考虑。 针对自己的个人项目，我在数据库中存放的是图片资源的相对路径，而图片资
VUE获取服务器中图片简易方法
hhh590_hh的博客
08-07 7212
VUE获取服务器中图片简易方法 前端获取服务器中的图片 本文基于前后端分离的项目，前端VUE，后端SSM，后端已在云服务器中使用tomcat部署。 在tomcat的webapp目录下找到后端项目文件夹，在WEB-INF同级目录中，创建一个文件夹，本文以img为例 注意该文件夹权限为777。 启动tomcat服务，在VUE中动态引入图片，注意此处不能用require。 <img :src="'http://***.**.**.***:8088/SSM/img/'+name+'.jpg'" alt&gt
关于tomcat部署，配置，访问路径等诺干问题总结
xiaoliuxiix的博客
11-22 3023
一． 关于tomcat项目访问路径问题总结 我们一般把项目部署在tomcat目录下面的webapp中，访问项目资源的时候就必须要带上这个项目文件夹名称。如果想要去掉这个项目名称，可以通过如下方式来进行： 修改server.xml配置文件 在host节点中加入context节点， Docbase：代表项目的绝对路径，也可以使用相对路径（相对于/webapp下） Path：代表项目的虚拟路径名 Debug:设定debug level，0表示提供最少的信息，9表示提供最多的信息。 Tomcat默认的访问路径在
tomcat部署vue项目Vue Router路径刷新404
05-30
在部署 Vue 项目到 Tomcat 后，当使用 Vue Router 时，刷新页面会出现 404 错误。这是因为 Tomcat 默认是不支持单页面应用的，需要进行一些配置。 解决方法： 1. 在根目录下创建 `web.xml` 文件，内容如下： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值