Spring+Vue工程部署在Linux

简介: Spring+Vue工程部署在Linux

代码介绍

前端代码:https://github.com/Snowstorm0/token-login-vue

后端代码:https://github.com/Snowstorm0/token-login-spring

使用 Spring+Vue 实现 token 登录、退出、访问拦截等功能。

1 部署后端

1.1 生成 jar 包

使用 Idea 的 maven 进行打包。

先双击 clean,清除其他的包,然后双击 package,如下图所示:

此时在工程下生成了 target 文件夹,里面有我们的 jar 包:

1.2 部署到服务器

将 jar 包 token-login-spring-1.0-SNAPSHOT.jar上传到服务器,运行启动命令:

java -jar token-login-spring-1.0-SNAPSHOT.jar

即可启动后端工程。

2 部署前端

2.1 打包

运行打包命令:

npm run build 

此时会在项目下生成 dist 文件夹。我们将该文件夹压缩,上传服务器,并解压。

2.2 安装 Nginx

Ubuntu 下的安装命令:

sudo apt-get install nginx

查看安装路径:

whereis nginx 

显示:

nginx:
 /usr/sbin/nginx    #主程序
 /usr/lib/nginx #软件的函数库
 /etc/nginx  #存放配置文件
 /usr/share/nginx  #存放静态文件
 /usr/share/man/man8/nginx.8.gz  #联机帮助文件

安装成功。

2.3 配置 Nginx

找到文件/etc/nginx/sites-available/default,修改为可编辑权限:

sudo  chmod 777 /etc/nginx/sites-available/default

找到root /var/www/html; 这一行,修改为解压的 dist 文件夹的路径,如:

root /home/myroot/Desktop/token-login/dist;

重启nginx:

sudo nginx -s reload

在浏览器输入:http://localhost/#/login,即可看到前端页面。

学习更多编程知识,请关注我的公众号:

代码的路

相关文章
|
22天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
97 62
|
20天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
37 2
|
22天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
24天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
56 2
|
25天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
32 3
|
26天前
|
Java Linux 网络安全
NIFI在Linux服务区上的部署配置过程是什么?
【10月更文挑战第21天】NIFI在Linux服务区上的部署配置过程是什么?
42 2
|
18天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
32 0
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
10天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
10天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
下一篇
无影云桌面