程序员经验分享-hwhale

SpringBoot 和 Vue 前后端分离项目的启动部署

2023-05-16

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

spring boot 项目导入idea中启动，运行mian函数启动项目（tomcat端口改为80）

二、安装node（最新版）https://nodejs.org/en/download/（具体安装过程，查百度）

1、测试node和cpm是否成功

  1. 打开黑窗口（win键+r）点击：命令提示符管理员（必须以管理员运行）。
  2. 输入node -v 与 npm -v

在这里插入图片描述

  1. 出现版本号为成功。

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

  1. 进入vue根路径
    在这里插入图片描述
  2. 运行命令：npm install （下载必须的依赖，如果报错了就是node环境有问题，查百度重新搭环境）
  3. 运行完上面的命令以后在执行 : npm run build （这个命令是打包）
  4. 出现这个说明已经打包成功：

在这里插入图片描述

  1. 成功以后你的vue项目下会出现一个 node_modules 的文件夹。

在这里插入图片描述

三、准备开始部署

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

好了现在已经把vue项目部署完了，接下来就是解决跨域问题。

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

1、首先下载一个 SwitchHosts 工具。

在这里插入图片描述

2、打开（右键以管理员身份运行）

在这里插入图片描述

这个窗口让留着，别关掉，接下来就是修改你vue项目的请求路径了（很重要的一步）。
在这里插入图片描述
修改完以后，把原来你在nginx下目录中的存放dist的文件删除（三个文件全部删除）然后重新按照上面的打包，在放进去然后在重启nginx。

然后运行vue项目，然后就可以正常拿到数据了。

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SpringBoot 和 Vue 前后端分离项目的启动部署 的相关文章

  • SpringCloud（二）入门案例之支付模块与订单模块的调用

    SpringCloud xff08 一 xff09 微服务概述 xff1a https blog csdn net weixin 45606067 article details 108481733 构建SpringCloud工程 概述 x

  • SpringCloud（三）Eureka服务注册中心

    文章目录 1 Eureka基础知识什么是服务治理什么是服务注册Eureka两大组件 2 Eureka介绍及原理理解介绍原理 3 单机版Eureka 构建步骤4 集群版Eureka 构建步骤Eureka集群原理说明EurekaServer集群

  • SpringCloud（四）zookeeper介绍及原理

    SpringCloud xff08 四 xff09 zookeeper介绍及原理 xff1a https blog csdn net weixin 45606067 article details 108499344 Zookeeper服务

  • docker 的安装 - 常用命令 - 应用部署

    文章目录 1 Docker简介什么是虚拟化什么是Docker容器与虚拟化比较Docker 组件1 Docker服务器与客户端2 Docker镜像与容器3 Register xff08 注册中心 xff09 2 Docker安装与启动安装Do

  • SpringCloud（六）Ribbon负载均衡服务调用

    Ribbon负载均衡 概述 是什么 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡工具 简单的说 xff0c Ribbon是Netflix发布的开源项目 xff0c 主要功能是提供客户端的

  • Python：map()函数使用详解

    1 函数定义 xff1a map function iterable 2 作用 xff1a 该函数通过接收一个函数function作为处理函数 xff0c 然后接收一个参数序列iterable xff0c 并使用处理函数对序列中的每个元素逐

  • SpringCloud（五）Consul服务注册与发现

    SpringCloud xff08 四 xff09 zookeeper介绍及原理 xff1a https blog csdn net weixin 45606067 article details 108538357 Consul简介 是什

  • SpringCloud（七）OpenFeign负载均衡服务调用

    1 概述 1 OpenFeign是什么 官网解释 xff1a https cloud spring io spring cloud static Hoxton SR1 reference htmlsingle spring cloud op

  • Zookeeper概述 | 安装部署（Windows和Linux）

    Zookeeper 一 Zokeeper 门 1 概述 Zookeeper是一个开源的分布式的 xff0c 为分布式应用提供协调服务的Apache项目 ZooKeeper is a centralized service for maint

  • Zookeeper内部原理

    Zookeeper概述 安装部署 xff08 Windows和Linux xff09 xff1a https blog csdn net weixin 45606067 article details 108619378 1 选举机制 面试

  • jsp和servlet的区别

    基本介绍 Servlet xff1a Servlet 是一种服务器端的Java应用程序 xff0c 具有独立于平台和协议的特性 xff0c 可以生成动态的Web页面 它担当客户请求 xff08 Web浏览器或其他HTTP客户程序 xff09

  • Session学习笔记

    1 session 简介 session 是我们 jsp 九大隐含对象的一个对象 session 称作域对象 xff0c 他的作用是保存一些信息 xff0c 而 session 这个域对象是一次会话期间使用同一个对象 所以这个对象可以用来保

  • session和cookie 区别【面试】

    说说Cookie和Session的区别 xff1f 1 存取方式的不同 xff08 Cookie只能保存ASCII xff0c Session可以存任意数据类型 xff09 Cookie中只能保管ASCII字符串 xff0c 假如需求存取U

  • JSP 九大内置对象，四大域对象

    JSP的九大内置对象 内置对象名 类型 request HttpServletRequest response HttpServletResponse session HttpSession application ServletConte

  • SpringCloud（八）Hystrix断路器

    文章目录 1 概述分布式系统面临的问题是什么能干嘛官网资料Hystrix官宣 xff0c 停更进维 2 Hystrix重要概念3 hystrix案例构建项目高并发测试故障现象和导致原因上诉结论如何解决 xff1f 解决的要求服务降级服务熔断

  • 谷粒学院（一）项目介绍

    一 项目背景 在线教育顾名思义 xff0c 是以网络为介质的教学方式 xff0c 通过网络 xff0c 学员与教师即使相隔万里也可以开展教学活动 xff0c 此外 xff0c 借助网络课件 xff0c 学员还可以随时随地进行学习 xff0c

  • PyTorch：Dataset()与Dataloader()的使用详解

    目录 1 Dataset类的使用 2 Dataloader类的使用 3 总结 Dataset类与Dataloader类是PyTorch官方封装的用于在数据集中提取一个batch的训练用数据的接口 xff0c 其实我们也可以自定义获取每个ba

  • MyBatisPlus（二）入门案例

    一 快速入门 使用第三方组件 xff1a 导入对应的依赖研究依赖如何配置代码如何编写提高扩展技术能力 操作步骤 1 创建数据库mybatis plus 2 创建user表 span class token keyword DROP span

  • MyBatisPlus（三）CRUD接口操作

    一 CRUD扩展 Insert 插入 span class token comment 测试插入 span span class token annotation punctuation 64 Test span span class to

  • MyBatisPlus（四）性能分析插件 | 条件构造器 | 代码生成器

    文章目录 一 性能分析插件1 导入插件2 测试使用 二 条件构造器1 ge gt le It isNull isNotNull2 eq ne3 between notBetween4 like noLike likeLeft likeRig

随机推荐

热门标签