Spring boot 和 Vue 前后端分离项目的启动部署(详细版)

一、首先拿到spring boot + vue项目,可以从git 上获取到

  1. spring boot 项目导入idea中启动,运行mian函数启动项目(tomcat端口改为80)

二、安装node(最新版)https://nodejs.org/en/download/(具体安装过程,查百度)

  1. 测试node和cpm是否成功
    1. 打开黑窗口(win键+x)点击:命令提示符管理员(必须以管理员运行)。
    2. 输入node -v  npm -v 
    3. 出现版本号为成功。

三、安装完node以后,黑窗口进入vue项目根路径下。

  1. 运行命令:npm  install   (下载必须的依赖,如果报错了就是node环境有问题,查百度重新搭环境)
  2. 运行完上面的命令以后在执行 : npm run build   (这个命令是打包)
  3. 出现这个说明已经打包成功:
  4. 成功以后你的vue项目下会出现一个dist的文件夹。
  5. 打包好vue项目以后,留着dist文件一会用到。

三、准备开始部署。

  1. 首先下载nginx服务器(我的nginx是安装到linux系统的,具体安装请自己查资料)
  2. 安装好nginx以后,在nginx下随便创建一个文件夹,然后把刚才dist里面的所有文件全部放到你刚在nginx下创建的文件夹里面,然后开始配置nginx(配置文件位置:nginx/conf/nginx.conf)
  3. 然后 vim nginx.conf (编辑这个文件)root:后面改成自己存放dist内容的文件路径, index:后面是固定的
  4. 配置完以后按esc 后   在按shirt+zz 退出保存。
  5. 然后到nginx目录下的sbin中启动nginx服务器 
  6. 启动:./nginx    重启:./nginx -s reload
  7. 好了现在已经把vue项目部署完了,接下来就是解决跨域问题。

四、处理跨域问题(因为俩个代码不在一个服务器中,vue项目在linux中,springboot项目在本地)

  1. 首先下载一个 SwitchHosts 工具。
  2. 打开(右键以管理员身份运行)
  3. 这个窗口让留着,别关掉,接下来就是修改你vue项目的请求路径了(很重要的一步)。
  4. 修改完以后,吧原来你在nginx下目录中的存放dist的文件删除(三个文件全部删除)然后重新按照上班的打包,在放进去然后在重启nginx。
  5. 然后运行vue项目,然后就可以正常拿到数据了。
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前技术】<br /> Vue        互联网最火的前框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前 HTTP 框架<br /> Element UI 前 UI 框架<br /> Vue Element Admin 前模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页