前端：VUE+Element UI、后端Spring Boot+Mybatis、方向代理：Nginx 前后端分离项目手工部署（测试项目带附件）

一、VUE+Element UI前端项目编译打包

1. 安装node.js的安装

https://blog.csdn.net/qq_43557395/article/details/124325563?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-124325563-blog-80493880.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.1&utm_relevant_index=3

2.npm install

3.npm run serve/npm run dev 本地把项目跑起来；

具体想知道用啥命令查看package.json文件，看开发配置了啥

如果项目跑不起来报错，把node_modules和package-lock.json删除后重新执行npm install命令；

这表示编译成功

4、npm run build，打包

按住ctrl+c,然后输入Y，退出

输入npm run build命令进行打包

打包完后将项目的目录下的dist目录压缩放到前端服务器

二、Spring Boot项目部署

1. 安装java jdk

https://blog.csdn.net/t2736416901/article/details/124147526

2. 安装maven

https://blog.csdn.net/weixin_56800176/article/details/127949796

3. mvn package 打包

打开项目，输入mvn package，进行打包

4. 讲jar包上传到后端服务器

讲tar包上传到服务器

5.修改数据库配置文件

将application.yml和jar包放到同一个目录下；如果没有application.yml这个文件，会默认使用代码里面的数据库配置；

三、Nginx配置

1、Nginx安装

步骤简单，到官网下载，然后解压就可以了

2、把后端jar包跑起来

java -jar community-0.0.1-SNAPSHOT.jar

看到端口表示项目已经跑了起来

3、把dist的内容解压到nginx的html文件夹内

4、设置Nginx代理

修改E:\nginx-1.22.1\conf\nginx.conf的文件

worker_processes  1;
events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        #Nginx监听的端口
        listen       8909;
        server_name  localhost;
        
        location / {
            #这里的html，dist文件的路径
            root   html;
            index  index.html index.htm;
            #不设置这个刷新链接404，因为没设置其他路径的代理其他路径访问，到index.html
            try_files  $uri $uri/ /index.html;
        }

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


}

四、Mysql建库、建表

1. 建一个community的数据库

2. 执行建表脚本

项目成功跑起来

项目下载地址：

https://download.csdn.net/download/qq_42114233/87462263