SpringBoot + Vue + Nginx前后端分离项目本地部署(Win)

SpringBoot + Vue + Nginx前后端分离项目本地部署步骤

本地部署所需步骤

  1. 将后端打包好的jar文件和前端生成的静态资源文件放入同一目录
  2. 启动Spring Boot应用
  3. 配置Nginx并重启
  4. 访问 http://your_domain 查看部署效果

前端Vue项目部署

  • 将写好的vue代码的目录下运行 npm run build 命令生成静态资源文件
  • 在前端项目中的bulid目录下面找到这两个文件

Nginx下载并配置

  1. 安装Nginx并启动
    Nginx下载地址:https://nginx.org/en/download.html
  • 下载后如下内容:
  • 双击这个nginx.exe后呈现如下界面
  • (重要)将前端vue打包好的文件放到Nginx的html文件夹里


  1. 配置Nginx反向代理(重要):

    nginx 复制代码
    server {
        listen 80;
        server_name your_domain;
    
        location / {
            root   html;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
    }
  2. 可以(非必须)修改 /etc/hosts 文件,将域名映射到本地

后端SpringBoot项目部署

  1. 在IDEA里面进行打包

    打包好的文件在项目的target目录下

  2. 运行SprinBoot应用,确保后端服务正常启动

    使用特定版本的jdk

    "D:\Env\JDK\jdk-11.0.0.1\bin\java.exe" -jar car.jar > application.log 2>&1

    使用系统变量的jdk

    java -jar car.jar > application.log 2>&1

    使用 start 命令以新窗口启动 Java 进程,并且关闭命令行窗口后进程仍会继续运行

    start java -jar car.jar > application.log 2>&1

这样就完成了Spring Boot + Vue + Nginx前后端分离项目的本地部署,希望能对您有所帮助!

相关推荐
skywalker_1111 分钟前
SpringBoot速通(实战教学)
java·spring boot·redis·rpc·ssm·mybatis-plus
码不停蹄的玄黓44 分钟前
Spring Boot 实现过滤器(Filter)三种常用方式
java·spring boot·后端
英勇无比的消炎药1 小时前
新手必看玩转TinyRobot一定要避开这些坑
前端·vue.js
英勇无比的消炎药1 小时前
别再盲目混用AI组件库和传统组件库差距原来这么大
前端·vue.js
Flittly3 小时前
【AgentScope Java新手村系列】(4)结构化输出
java·spring boot·spring·ai
英勇无比的消炎药3 小时前
前端提效神器全新AI组件库TinyRobot改写日常开发模式
前端·vue.js
英勇无比的消炎药3 小时前
前端提效神器TinyRobot
前端·vue.js
CDwenhuohuo4 小时前
uni 背景色渐变 全屏
前端·javascript·vue.js
爱怪笑的小杰杰4 小时前
Vue 项目交付第三方开发,如何隐藏核心 JS 源码?
前端·javascript·vue.js
小二·4 小时前
Vue 3 组合式 API 进阶实战
前端·javascript·vue.js