Vue3和Springboot前后端简单部署

一、Vue3+Springboot 的前后端简单部署 (在win下面部署)

1、前端实现部署

思想: 前端打包项目后、放到nginx中进行部署

1、nginx 安装 和 解压

1、下载 nginx.zip win版本 解压就可以

2、解压后、启动程序

3、访问 nginx 欢迎页面

http://localhost/

80 端口 可以省略 直接访问

4、配置文件说明

1、conf 下面 nginx.conf 文件

shell 复制代码
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;

    server {
        listen       80;                # 端口监听 
        server_name  localhost;   
        # 指定前端项目所在的位置 
        location / {                    # 指定项目地址  
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

5、前端 vue3 进行打包操作

或者通过 npm 命令打包 、进入到 项目的当前路劲下面 执行命令:

shell 复制代码
npm run build 

6、把打包后的 dist 放到 、nginx 目录下面

修改 nginx 的配置文件:

复制代码
#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    server {
        listen       9000;        # 端口监听 
        server_name  localhost;
        location / {
            root   dist;           # 指定项目地址 
            index  index.html index.htm;
        }
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

不要启动多个nginx 不然可以找不到、页面

补充 操作 nginx的一些命令

复制代码
1、查看nginx 是否启动成功的命令:
tasklist /fi "imagename eq nginx.exe"

2、快速停止或关闭nginx:
nginx -s stop

3、完整有序的停止nginx:
nginx -s quit

4、使用taskkill停止或关闭nginx:
taskkill /f /t /im nginx.exe

2、后端实现部署

思想: maven打包项目后、准备好数据库、启动jar 项目包

1、准备好数据库文件、这里是win下面的数据库、路劲可以直接不用修改、如果是其他地方的数据库、需要修改数据库IP

2、打包命令

pom.xml 文件需要有打包插件

xml 复制代码
<!-- Spring Boot的Maven插件,打包插件 -->
<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
</plugin>

打包命令

shell 复制代码
mvn clean package

3、启动 打包后的命令

shell 复制代码
java -jar  xxx.jar
相关推荐
YongGit2 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
述雾学java2 分钟前
Spring Cloud Feign 整合 Sentinel 实现服务降级与熔断保护
java·spring cloud·sentinel
保持学习ing3 分钟前
苍穹外卖day3--公共字段填充+新增菜品
java·阿里云·实战·springboot·前后端·外卖项目·阿里云文件存储
77qqqiqi21 分钟前
正则表达式
java·后端·正则表达式
厦门德仔1 小时前
【WPF】WPF(样式)
android·java·wpf
大春儿的试验田1 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
Gappsong8741 小时前
【Linux学习】Linux安装并配置Redis
java·linux·运维·网络安全
hqxstudying1 小时前
Redis为什么是单线程
java·redis
@大迁世界1 小时前
AR 如何改变我们构建网站的方式
后端·ar·restful
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端