Java结合Vue项目打包并进行服务器部署

目录
  • Java后端项目打包和服务器部署
  • Vue项目服务器部署

两周前我刚刚入职实习的时候，后端的几个同事看到我需要学习如何把项目进行部署，都围过来教我怎么部署，我感觉学习到了很多，因此，记录一下学习的笔记。
当然了，这些部署是建立在已经配置好tomcat（后端服务器）和nginx（前端服务器）的基础之上的，因为公司之前已经做好了，我只需要迭代即可。

Java后端项目打包和服务器部署

1、IDEA点击maven，然后点击clean，接着点击package打包获得cr.war（在项目根目录的target目录）。

为啥需要打war包，我也不是很清楚。好像是因为之前jar包部署有问题。

2、通过Xshell连接服务器：

点击Xshell左上角的新建按钮：

然后填写一下服务器名称、服务器IP地址和服务器端口号即可：

如果连上了服务器，会有这样的结果：

3、接着需要备份之前的cr.war，备份在/opt/server/apache-tomcat-9.0.8/backup文件夹中：

[sxzm@localhost webapps]$ mv cr.war ../backup/cr220706.war

下面是我之前记录下来的服务器输出：

4、通过Xftp 7上传cr.war到/apache-tomcat-9.0.8/webapps中：

如果没有安装Xftp 7，直接点击下面的官网链接下载即可：
https://www.xshell.com/zh/xftp/

个人感觉这个工具还是特别好用的。

5、到/apache-tomcat-9.0.8/bin下面重启tomcat
关闭tomcat：

[sxzm@localhost bin]$ ./shutdown.sh

但是如果你输入以下命令，你会发现tomcat没有关闭：

[sxzm@localhost bin]$ ps -ef | grep java

这个没有关闭的进程为14414。
下面直接使用这个命令杀这个进程：

[sxzm@localhost bin]$ kill -9 14414

再次查看进程：

[sxzm@localhost bin]$ ps -ef | grep java

可以看到这个进程结束了，也就意味着tomcat关闭了。
下面重新启动tomcat：

[sxzm@localhost bin]$ ./startup.sh

这样tomcat就启动成功了。
可以继续使用这个命令查看tomcat启动情况：

[sxzm@localhost bin]$ ps -ef | grep java

6、最后到/logs下查看是否有报错信息

[sxzm@localhost apache-tomcat-9.0.8]$ cd logs

使用这个命令查看catalina.out 文件的末尾输出：

[sxzm@localhost logs]$ tail -f catalina.out

可以看到springboot启动成功了，也就意味着Java项目部署成功了。

Vue项目服务器部署

1、Vue前端项目导包生成dist.zip文件，同样按照上面的教程进入Xshell软件登录服务器，前端部署很简单，主要就是备份和解压。

2、在/opt/ui文件夹下解压，解压之前先备份之前的dist（直接解压就行，不需要有什么其他操作，主要还是要使用Xftp 7进行备份）：

unzip -o dist.zip

到此这篇关于Java结合Vue项目打包并进行服务器部署的文章就介绍到这了,更多相关Java Vue项目打包部署内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Java SpringBoot+vue+实战项目详解

    Java SpringBoot+vue+实战项目详解

    目录 1.<锋迷商城>业务流程设计-接⼝规范 1.1 前后端分离与单体架构流程实现的区别 1.1.1单体架构 1.1.2 前后端分离架构 1.2 接口介绍 1.2.1接口概念 1.2.2接口规范 1.3 Swagger 1.3.1作用 1.3.2 Swagger整合 1.3.3 Swagger注解说明 1.3.4 Swagger-ui 插件 1.4 RESTful 总结 1.<锋迷商城>业务流程设计-接⼝规范 在企业项⽬开发中,当完成项⽬的需求分析.功能分析.数据库分析与设计之后,

  • Java结合Vue项目打包并进行服务器部署

    Java结合Vue项目打包并进行服务器部署

    目录 Java后端项目打包和服务器部署 Vue项目服务器部署 两周前我刚刚入职实习的时候,后端的几个同事看到我需要学习如何把项目进行部署,都围过来教我怎么部署,我感觉学习到了很多,因此,记录一下学习的笔记.当然了,这些部署是建立在已经配置好tomcat(后端服务器)和nginx(前端服务器)的基础之上的,因为公司之前已经做好了,我只需要迭代即可. Java后端项目打包和服务器部署 1.IDEA点击maven,然后点击clean,接着点击package打包获得cr.war(在项目根目录的targe

  • Vue项目打包部署到iis服务器的配置方法

    Vue项目打包部署到iis服务器的配置方法

    一 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则 另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin

  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo

  • Vue项目打包部署到apache服务器的方法步骤

    Vue项目打包部署到apache服务器的方法步骤

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

  • vue项目打包后部署到服务器的详细步骤

    vue项目打包后部署到服务器的详细步骤

    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接: 链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg 提取码: 2jbf 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • vue项目打包上传github并制作预览链接（pages）

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • Vue项目打包压缩的实现(让页面更快响应)

    影响网页响应速度的因素有很多,例如:http请求次数太多.服务器本身处理请求太久.请求内容太大.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长. 我的一个小项目,仅有三四个页面,但因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升. 一.路由懒加载:分割代码块 Vue支持异步组件,

随机推荐