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
相关推荐
魔镜魔镜_谁是世界上最漂亮的小仙女几秒前
java-集合
java·后端·程序员
真实的菜2 分钟前
消息队列高级特性与原理:解锁分布式系统的底层逻辑
java
若水不如远方3 分钟前
java范型
java
凌辰揽月6 分钟前
Web后端基础(基础知识)
java·开发语言·前端·数据库·学习·算法
前端世界7 分钟前
ASP.NET ListBox控件多选实战:3步打造高效兴趣收集系统
后端·asp.net
海奥华210 分钟前
go中的接口返回设计思想
开发语言·后端·golang
lifallen12 分钟前
深入浅出 Arrays.sort(DualPivotQuicksort):如何结合快排、归并、堆排序和插入排序
java·开发语言·数据结构·算法·排序算法
长安不见14 分钟前
背景知识: 理解LimitLatch背后的AQS
java
小吕学编程16 分钟前
策略模式实战:Spring中动态选择商品处理策略的实现
java·开发语言·设计模式
weixin_4383354022 分钟前
Spring Boot实现接口时间戳鉴权
java·spring boot·后端