tomcat部署前端vue项目(项目上线具体操作)

这篇具有很好参考价值的文章主要介绍了tomcat部署前端vue项目(项目上线具体操作)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Linux系统下安装部署tomcat

在linux上安装tomcat可以直接在linux服务器上通过wget方式直接下载tomcat,也可以把本地的tomcat上传到服务器。
具体操作步骤如下:

  1. 创建一个tomcat目录,位置可以根据自己情况选择
mkdir /usr/local/tomcat
  1. 将上传的tomcat复制到上面目录
cp apache-tomcat-7.0.77.tar.gz /usr/local/tomcat/
  1. 进入tomcat目录
cd /usr/local/tomcat/
  1. 解压tomcat
tar -zxvf apache-tomcat-7.0.77.tar.gz
  1. 进入tomcat的bin目录
cd /usr/local/tomcat/apache-tomcat-7.0.77/bin/
  1. 启动tomcat
./startup.sh
  1. 关闭tomcat
./shutdown.sh

二、tomcat中部署vue项目

  1. 删除tomcat目录\webapps\ROOT下全部文件
  2. npn run build打包vue项目(根据不同项目打包方式不同)
  3. 将生成的dist文件夹复制到\webapps\ROOT目录下
  4. 在ROOT目录下新建WEB-INF文件夹并在WEB-INF文件夹下新建web.xml,并粘贴以下内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/dist/index.html</location>
    </error-page>
</web-app>

5.启动tomcat然后localhost:8080/dist访问文章来源地址https://www.toymoban.com/news/detail-789009.html

到了这里,关于tomcat部署前端vue项目(项目上线具体操作)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue项目:生成二维码,扫二维码跳转到相应页面

    Vue2项目 1、安装依赖::npm i arale-qrcode --save 2、引入:import AraleQRCode from \\\"arale-qrcode\\\"; 接下来让我们纯前端生成一个二维码                               【PS:亲测有效,大家可以放心使用 CV 大法哈  !】 HTML JS 需求中遇到的情况,也是百度了很久参考了很多大佬的文章

    2024年02月07日
    浏览(52)
  • J2EE项目部署与发布(Linux版本)->jdk&tomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署

    jdktomcat安装 MySQL安装 后端接口部署 linux单体项目前端部署 1.jdktomcat安装 上传jdk、tomcat安装包 解压两个工具包 #解压tomcat tar -zxvf apache-tomcat-8.5.20.tar.gz #解压jdk tar -zxvf jdk-8u151-linux-x64.tar.gz 配置并且测试jdk安装 #配置环境变量 vim /etc/profile #java environment export JAVA_HOME=/javaxl/softwar

    2024年02月06日
    浏览(39)
  • 关于部署vue项目在Linux上的两种方式tomcat以及nignx(1)使用tomcat进行部署

    阿丹有话说:         之前在写spring-boot项目的时候是直接写的jsp页面直接打成war包来运行。使用到了tomcat,而且简单方便,但是美中不足就是动画演示以及页面没有办法做的非常美观。自从开始写前后端分离的项目(微服务等)之后,发现element-ui是真的好用。现在想给vue的

    2024年02月03日
    浏览(54)
  • vue3项目打包部署到Tomcat(亲测有效)

    首先,要确保电脑上已经安装了jdk,还有Tomcat,而且都安装正确。 jdk下载与安装教程(win10) Tomcat 9.0 安装及配置教程(win10系统) Vue项目在VScode里面可以通过npm run serve可以正常运行。 下面是打包部署到tomcat的步骤: 1.在vue项目的vue.config.js文件里面module.exports导出的对象中添加

    2024年02月13日
    浏览(40)
  • 云服务器 CentOS7 操作系统上安装Jpress (Tomcat 部署项目)

    xftp 新建连接 下载 jdk1.8 注:此处 CentOS7 是64位,所以下载的是:Linux x64, 文件类型为 tar.gz 的文件 JDK 官网地址:https://www.oracle.com/java/ 上传此包到云服务器上面 xShell 连接云服务器,找到 jdk1.8 所在的位置,输入解压指令: 配置 jdk 环境,输入编辑指令: 在最后一行加上环境

    2024年02月07日
    浏览(61)
  • [ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署

    Apache Tomcat® - Apache Tomcat 9 Software Downloads https://tomcat.apache.org/download-90.cgi Tomcat的主要特点和功能包括: ①Servlet和JSP容器:Tomcat作为一个Web服务器,可以解释执行Java Servlet和JSP代码,处理HTTP请求和响应,生成动态的Web页面。 ②独立性和易用性:Tomcat是一个独立的服务器,可以

    2024年02月07日
    浏览(56)
  • vue打包之后的项目在nginx的部署404,以及无法跳转路由问题

    路径都对,项目路由本地也能正常访问,但是部署后加路由地址404。其实就是nginx配置的问题。知乎上一位大哥的解决办法:vue-cli打包之后的项目在nginx的部署404,以及无法跳转路由问题 - 知乎 问题其实就是路由没有重定向。更简单的配置方式就是try_files $uri $uri/ /index.html;  

    2024年02月14日
    浏览(40)
  • 关于部署vue项目在Linux上的两种方式tomcat以及nignx(3)使用nignx进行部署

    阿丹有话说:         前两篇文章主要讲解了将vue中tomcat部署研究了。解决了在后台代码中通过过滤器来解决跨域问题。后期会继续出在tomcat中的代理配置等。本篇文章来将vue项目部署在nignx上,并且通过反向代理来解决跨域请求以及请求转发。  首先我们再来了解一下ngi

    2024年02月04日
    浏览(52)
  • Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤,从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf)

    目录 一丶前言 二、安装nginx 1.准备nginx 2.服务器上传nginx 3.解压nginx  4.安装相关依赖库 5.编译nginx 6.启动nginx 7.访问nginx  8.安装成系统服务 三、安装Tomcat 1.安装JDK(如果安装并配置环境变量了可以略过) 2.准备Tomcat 3.服务器上传tomcat 4.解压tomcat  5.启动tomcat 6.访问tomcat 7.设置

    2024年02月05日
    浏览(64)
  • Nginx部署Vue前端项目

    目录 一、安装Nginx 1、安装完成 2、启动Nginx 3、问题 二、修改Nginx配置文件 系统环境:Mac Pro—10.15.7版本 Nginx版本:1.19.6 Nginx的配置文件目录:/usr/local/etc/nginx Nginx的安装目录:/usr/local/Cellar/nginx 可能遇到的报错一:nginx: [error] open() \\\"/usr/local/var/run/nginx.pid\\\" failed (2: No such file

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包