
超详细SpringBoot+Vue项目部署(两个Vue项目)
该文章已同步收录到我的博客网站,欢迎浏览我的博客网站,xhang’s blog
1:项目部署所使用的工具或资源
-
Xshell:用于在本机Windows界面访问远端不同系统下的服务器。
-
Xftp:Xftp是一个功能强大的SFTP、FTP 文件传输软件。使用了 Xftp 以后,MS Windows 用户能安全地在 UNIX/Linux 和 Windows PC 之间传输文件。
Xftp官网
-
Postman:Postman是一个接口测试工具,本次部署中用于测试后端接口。
相较于Postman,可以有更好的选择即ApiFox。在本次部署中为方便采用Postman。
-
Nginx:Nginx是一个高性能的 HTTP 和反向代理服务器,可以作为静态页面的 web 服务器
-
ECS服务器或者轻量应用服务器:
可以选择大厂云服务器供应商,如阿里、腾讯、华为。本次部署中采用腾讯云服务器。我购买的云服务器配置是2核2GB,镜像为CentOS 7.6
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iLeCe1nb-1663482690465)(SpringBoot+Vue项目部署.assets/image-20220917195235591.png)]](https://i-blog.csdnimg.cn/blog_migrate/b8d9c4f0f6b8affa2dcaade23fc510ea.png)
2:SpringBoot项目部署
2.1更改跨域配置
将跨域配置修改为云服务器的公网ip
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xgs4hHQP-1663482690466)(SpringBoot+Vue项目部署.assets/image-20220917195447595.png)]](https://i-blog.csdnimg.cn/blog_migrate/9d7e13d50efbd1db62ff017f7b2dd34c.png)
2.2项目打包
一:首先打开maven,在maven生命周期选择clear选项,clear命令是maven的清除命令,这一步的目的是为了清空target目录下的所有内容。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JZTGXI2h-1663482690466)(SpringBoot+Vue项目部署.assets/image-20220917194216939.png)]](https://i-blog.csdnimg.cn/blog_migrate/562d8acabab8cdda2852750cb5354915.png)
二:选择package选项,将项目打成jar包。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbvAG7EV-1663482690467)(SpringBoot+Vue项目部署.assets/image-20220917195619840.png)]](https://i-blog.csdnimg.cn/blog_migrate/6e6a595ddaa75c8267c3b27d702c75d6.png)
三:控制台出现BUILD SUCCESS就表示打包成功
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DWHU71jT-1663482690467)(SpringBoot+Vue项目部署.assets/image-20220917195630637.png)]](https://i-blog.csdnimg.cn/blog_migrate/0279558adf2a2870d754d0eec3c32684.png)
四:查看target目录,找到打包好的项目jar包。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avAgJaYk-1663482690468)(SpringBoot+Vue项目部署.assets/image-20220917195819155.png)]](https://i-blog.csdnimg.cn/blog_migrate/8314f74f34b7b35e1a694929c52a7f2f.png)
2.3部署jar包
2.3.1上传jar包和静态资源文件
一:查看SpringBoot项目服务端口:我的是8090
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-13fTUtRH-1663482690468)(SpringBoot+Vue项目部署.assets/image-20220917200134377.png)]](https://i-blog.csdnimg.cn/blog_migrate/774930dfdc3b625cad40d94abe594867.png)
二:在控制台开放相应端口
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3lgIsUvP-1663482690468)(SpringBoot+Vue项目部署.assets/image-20220917210830014.png)]](https://i-blog.csdnimg.cn/blog_migrate/d6ec8328626e987e4d9c56339bde4b8f.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSnJBauF-1663482690469)(SpringBoot+Vue项目部署.assets/image-20220917211003349.png)]](https://i-blog.csdnimg.cn/blog_migrate/c995d761724249cab5c39de8d7ba19b8.png)
三:打开Xshell,输入云服务器公网ip创建一个新的会话。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vmow5Qan-1663482690469)(SpringBoot+Vue项目部署.assets/image-20220917211919422.png)]](https://i-blog.csdnimg.cn/blog_migrate/b18f3645219da4b70ffcb84b4f89d9b1.png)
四:双击刚刚创建的会话进行连接,输入用户名和密码
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tax10bnk-1663482690469)(SpringBoot+Vue项目部署.assets/image-20220917212035895.png)]](https://i-blog.csdnimg.cn/blog_migrate/4ddc81b25ad71ee1771d5ad8ba3e0d36.png)
五:密码如果忘记的话到控制台中进行修改:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCzBx9nP-1663482690469)(SpringBoot+Vue项目部署.assets/image-20220917212145008.png)]](https://i-blog.csdnimg.cn/blog_migrate/0960881dc54978ca28c84b7d36eeb5f8.png)
连接成功:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qArEcG7q-1663482690470)(SpringBoot+Vue项目部署.assets/image-20220917212321362.png)]](https://i-blog.csdnimg.cn/blog_migrate/c03f9a9bef19ed94a3785406ba7fb603.png)
六:创建新目录,并将jar包通过Xftp传输到新创建的目录当中,如果有静态资源的话就传输到jar包的同级目录下:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-obJttX7q-1663482690470)(SpringBoot+Vue项目部署.assets/image-20220917212824535.png)]](https://i-blog.csdnimg.cn/blog_migrate/ca27670a549b4ea360df0e7b828a9d90.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3OzziTts-1663482690471)(SpringBoot+Vue项目部署.assets/image-20220917212932405.png)]](https://i-blog.csdnimg.cn/blog_migrate/705c498554cabccf1bf90b01762641a9.png)

2.3.2安装JDK
jdk官网:Java Downloads | Oracle
下载Linux版本:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TjOZY5Ze-1663482690472)(SpringBoot+Vue项目部署.assets/image-20220918001728430.png)]](https://i-blog.csdnimg.cn/blog_migrate/35262e2b492d8d8174682ef934737ab6.png)
一:将JDK传输到项目目录
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YYXb7La8-1663482690472)(SpringBoot+Vue项目部署.assets/image-20220918001023348.png)]](https://i-blog.csdnimg.cn/blog_migrate/82e89377b3ad7c34f3ed2d2f902fed0f.png)
二:解压至自定义目录(一般是 /usr/local)
tar -xzvf jdk-8u291-linux-x64.tar.gz -C /usr/local/
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jk1wesns-1663482690472)(SpringBoot+Vue项目部署.assets/image-20220918001125266.png)]](https://i-blog.csdnimg.cn/blog_migrate/e2117fba1f5cc5eca24ae124d59d583e.png)
二:配置环境变量。进入到/etc目录下,用vim编辑器在 profile 文件中添加四个变量。
export JAVA_HOME=/usr/local/jdk1.8.0_291
export JRE_HOME=$JAVA_HOME/jre
export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=/bin:/usr/bin:$PATH:$JAVA_HOME/bin:$PATH
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JkLD1UYw-1663482690472)(SpringBoot+Vue项目部署.assets/image-20220918001434771.png)]](https://i-blog.csdnimg.cn/blog_migrate/0ec67d9971f45e1621eae48b0a9550fa.png)
JDK11环境配置
export JAVA_HOME=/usr/local/jdk-11.0.18
export CLASSPATH=.:$JAVA_HOME/lib
export PATH=$JAVA_HOME/bin:$PATH
export JAVA_HOME CLASSPATH PATH
三:刷新配置
source /etc/profile
**四:查看jdk是否安装成功**
java -version
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QilciIa-1663482690473)(SpringBoot+Vue项目部署.assets/image-20220918001633124.png)]](https://i-blog.csdnimg.cn/blog_migrate/e24d38b2b453c36d0111e1c431a7a233.png)
2.3.3安装MySQL
一:在控制台开发MySQL服务端口3306
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGByjeeP-1663482690473)(SpringBoot+Vue项目部署.assets/image-20220917231058099.png)]](https://i-blog.csdnimg.cn/blog_migrate/c5e38e976b7407ea5156c4d6104a655e.png)
二:在jar包同级目录下创建目录用于存放MySQL安装包
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wdnKt9tF-1663482690473)(SpringBoot+Vue项目部署.assets/image-20220917215752264.png)]](https://i-blog.csdnimg.cn/blog_migrate/14c2d50db31757d1419d4d40de3d9968.png)
三:将MySQL安装包传输到刚刚创建的目录下,并解压
MySQL安装包百度云地址(版本8.0.26)
提取码:xha8
解压命令:
tar -xvf mysql-8.0.26-1.el7.x86_64.rpm-bundle.tar
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CJSBI0Al-1663482690473)(SpringBoot+Vue项目部署.assets/image-20220917222849918.png)]](https://i-blog.csdnimg.cn/blog_migrate/52116a019f5a267282a09319386c6eaa.png)
四:查看解压后的MySQL压缩包
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0pTHNldV-1663482690474)(SpringBoot+Vue项目部署.assets/image-20220917223810262.png)]](https://i-blog.csdnimg.cn/blog_migrate/1539630181a7cef4dd4af3f1857b8dba.png)
五:清空linux自带的数据库(因为CentOS自带一个老版本的mariadb-libs与当前mysql包的冲突,故需要先卸载,再安装)
rpm -qa | grep Mysql
rpm -qa | grep mariadb
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EcaK7R1E-1663482690474)(SpringBoot+Vue项目部署.assets/image-20220917223314928.png)]](https://i-blog.csdnimg.cn/blog_migrate/ffac7063cc5079ce56b7063be07b9c5c.png)
卸载已有的数据库:(卸载会把这个包的依赖包也一起卸载)
yum -y remove mariadb-libs.x86_64
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o7HHX21P-1663482690474)(SpringBoot+Vue项目部署.assets/image-20220917223234664.png)]](https://i-blog.csdnimg.cn/blog_migrate/444efece0828759b09a2ec8863f2ae35.png)
六:开始安装 mysql,依次执行下述命令
安装依赖:
yum install libaio
依次执行以下命令:
rpm -ivh mysql-community-common-8.0.25-1.el7.x86_64.rpm
rpm -ivh mysql-community-client-plugins-8.0.25-1.el7.x86_64.rpm
rpm -ivh mysql-community-libs-8.0.25-1.el7.x86_64.rpm
rpm -ivh mysql-community-client-8.0.25-1.el7.x86_64.rpm
rpm -ivh mysql-community-server-8.0.25-1.el7.x86_64.rpm
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUg6mhCD-1663482690475)(SpringBoot+Vue项目部署.assets/image-20220917224830425.png)]](https://i-blog.csdnimg.cn/blog_migrate/d54564ef5f157bbfe51d2b72a5dee56b.png)
七:查看MySQL的安装情况:
rpm -qa|grep -i mysql
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-feJjcttU-1663482690475)(SpringBoot+Vue项目部署.assets/image-20220917224915023.png)]](https://i-blog.csdnimg.cn/blog_migrate/fbb91e86eb72202d7ba3da5676c3798a.png)
八:启动MySQL服务并查看服务状态
systemctl start mysqld.service
systemctl status mysqld.service
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C0KyNBLT-1663482690475)(SpringBoot+Vue项目部署.assets/image-20220917225240782.png)]](https://i-blog.csdnimg.cn/blog_migrate/bb86fcc5631cf2aec8c8e3040ab69547.png)
九:查看MySQL初始化密码
grep "password" /var/log/mysqld.log
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GkY2zpE-1663482690476)(SpringBoot+Vue项目部署.assets/image-20220917225345086.png)]](https://i-blog.csdnimg.cn/blog_migrate/d44a58ac00a751aa617ca25cde29f102.png)
十:登录MySQL并修改初始密码
mysql -u root -p
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C6PABCeL-1663482690476)(SpringBoot+Vue项目部署.assets/image-20220917225520822.png)]](https://i-blog.csdnimg.cn/blog_migrate/3045166235d1711cc380c7617ea45fc5.png)
修改密码:
注意:此数据库的密码要和jar包项目所连接的数据库的密码相同,否则会连接不上
mysql8.0之后的版本加入密码安全度检测机制,如果设置密码过于简单会导致报错
下面将更改MySQL的密码安全设置:
1. 首先查看当前MySQL的密码安全设置
SHOW VARIABLES LIKE 'validate_password%';
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0Uyal9M-1663482690476)(SpringBoot+Vue项目部署.assets/image-20220918090202194.png)]](https://i-blog.csdnimg.cn/blog_migrate/3b72397b7ed6430eee00f949a2fcf13b.png)
2. 更改密码长为6,密码安全策略等级为LOW
set global validate_password.length=6;
set global validate_password.policy=LOW;
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUGNCxZm-1663482690477)(SpringBoot+Vue项目部署.assets/image-20220918090400617.png)]](https://i-blog.csdnimg.cn/blog_migrate/03d091694ca8395f3b2704a1abbeac08.png)
3. 查看更改后的密码安全设置
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ia9o747-1663482690477)(SpringBoot+Vue项目部署.assets/image-20220918090452951.png)]](https://i-blog.csdnimg.cn/blog_migrate/89bbaf71d8f2c5bc3427b26976a22153.png)
4. 更改密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '密码';
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JWPdSzey-1663482690477)(SpringBoot+Vue项目部署.assets/image-20220918090521221.png)]](https://i-blog.csdnimg.cn/blog_migrate/208c17f2daf7aa39b479eb3727e1566c.png)
2.3.4导入sql文件资源
一:打开Navicat,右键数据库->转储sql文件->结构和数据
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gGs2OOqO-1663482690477)(SpringBoot+Vue项目部署.assets/image-20220917231921285.png)]](https://i-blog.csdnimg.cn/blog_migrate/f212345229d8b663e1a3382a0d944307.png)
二:将sql文件通过Xftp传输到项目目录中
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bPHxohnh-1663482690478)(SpringBoot+Vue项目部署.assets/image-20220917232304998.png)]](https://i-blog.csdnimg.cn/blog_migrate/a08b1bb54a0428d750d50cd497624a57.png)
二:创建数据库
切记:创建的数据库名要和SpringBoot中配置文件当中配置的数据库url的数据库名保持一致。
create database 数据库名;
show databases;
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ghXbUNAA-1663482690478)(SpringBoot+Vue项目部署.assets/image-20220918095014330.png)]](https://i-blog.csdnimg.cn/blog_migrate/bd771503ea3df5efd070b36d4f14d536.png)
二:进入创建的数据库,导入sql文件资源
use 数据库名;
source sql文件相对路径/sql文件名
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1O9rUltT-1663482690478)(SpringBoot+Vue项目部署.assets/image-20220917232552642.png)]](https://i-blog.csdnimg.cn/blog_migrate/2d474f70f4cee231db90d3e5ba2a96c9.png)
查询测试:
select * from 表名;
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bokw0lU1-1663482690478)(SpringBoot+Vue项目部署.assets/image-20220917233148005.png)]](https://i-blog.csdnimg.cn/blog_migrate/8a9c63521fe9b204daf117e44acd1c4f.png)
2.3.5运行jar包
一:进入jar包目录下
nohup 英文全称 no hang up(不挂起),用于在系统后台不挂断地运行命令,退出终端不会影响程序的运行。
执行命令:
nohup java -jar myMusic-0.0.1-SNAPSHOT.jar &


二:查看日志文件
cat -n nohup.out
后端项目已经成功在8090端口运行
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFc2Tp2c-1663482690479)(SpringBoot+Vue项目部署.assets/image-20220918094609923.png)]](https://i-blog.csdnimg.cn/blog_migrate/890845faebe824ac5cd893ccabf1ae75.png)
三:注意:如果操作不当导致jar包并没有在相应端口运行,但是已经占用进程的情况,再次运行jar包会报错的解决方案,
查看当前所有进程
ps sux
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWvP4UEp-1663482690480)(SpringBoot+Vue项目部署.assets/image-20220918095827950.png)]](https://i-blog.csdnimg.cn/blog_migrate/27b2a703d8664b35d2866b9bfcacf966.png)
杀死该进程:
kill -9 进程ID
再次执行运行jar包命令即可。
2.4接口测试
一:打开Postman,输入要测试的接口,显示测试成功

在nohub.out日志文件中可以查看到日志信息(需要在SpringBoot配置文件中配置mybatis-plus的日志文件)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YI57RFf5-1663482690480)(SpringBoot+Vue项目部署.assets/image-20220918094912303.png)]](https://i-blog.csdnimg.cn/blog_migrate/9f1f88f509c11e0b04c27ca81cbd44b5.png)
3.Vue项目部署
3.1更改代理服务器、axios、Vuex配置
将上述三种的url路径由原来的localhost(本地化部署时)更改为云服务器公网IP
一:代理服务器
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJZPwnhl-1663731961839)(htps://img-blog.csdnimg.cn/045ce0ee969044bdbe862c7a209d5afd.png)]](https://i-blog.csdnimg.cn/blog_migrate/776eaacc4aeafc4c754b5e940fb3d271.png)
二:axios接口配置

三:Vuex

3.2将项目打包上传到云服务器
一:打开控制台,输入以下命令打包
npm run build
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O03pt5ND-1663482690482)(SpringBoot+Vue项目部署.assets/image-20220918103102100.png)]](https://i-blog.csdnimg.cn/blog_migrate/e3ab1501454c8cef99ce6233937ee64c.png)
二:在项目根目录下会自动生成一个dist文件夹
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMkhTRp6-1663482690482)(SpringBoot+Vue项目部署.assets/image-20220918103203876.png)]](https://i-blog.csdnimg.cn/blog_migrate/fae71a381f346aec8556facdf8131ed4.png)
三:有两个Vue项目的另一个和上述操作一样,将两个dist文件分别重命名,等待Nginx安装完成后上传到服务器
3.3Nginx安装
提取码:xha8
一:将下载好的Nginx安装包发送到服务器中项目的根目录下
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RxbFUSj3-1663482690482)(SpringBoot+Vue项目部署.assets/image-20220918104803078.png)]](https://i-blog.csdnimg.cn/blog_migrate/7456537980e468479663854fba9a1cf2.png)
二:解压安装包到当前目录
tar -xzvf nginx-1.18.0.tar.gz
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-31YIReQ1-1663482690483)(SpringBoot+Vue项目部署.assets/image-20220918104915700.png)]](https://i-blog.csdnimg.cn/blog_migrate/49912bd50d233c3ab8655d25766326e0.png)
安装包可以删除
三:安装相应依赖
安装gcc
yum install -y gcc
安装perl库
yum install -y pcre pcre-devel
安装zlib库
yum install -y zlib zlib-devel
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXGs9ynM-1663482690483)(SpringBoot+Vue项目部署.assets/image-20220918105626478.png)]](https://i-blog.csdnimg.cn/blog_migrate/ef5a038c8fab27ccae286f5f27cf8051.png)
四:进入到nginx-1.18.0目录下,并执行以下命令
源码编译安装
./configure
执行make命令
make
执行make install命令
make install
安装完成
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGqiz4PQ-1663482690484)(SpringBoot+Vue项目部署.assets/image-20220918110408832.png)]](https://i-blog.csdnimg.cn/blog_migrate/ae78248dc7ed606e35437db4eb1081fd.png)
五:启动Nginx服务
进入到以下目录并执行./nginx命令启动Nginx服务
cd /usr/local/nginx/sbin/
./nginx
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MRjmzmGx-1663482690484)(SpringBoot+Vue项目部署.assets/image-20220918110812754.png)]](https://i-blog.csdnimg.cn/blog_migrate/13deb08b173e69be2f246ce9e9531b01.png)
在本地输入云服务器公网ip,出现以下界面就表示Nginx安装成功。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z6UxWCbw-1663482690485)(SpringBoot+Vue项目部署.assets/image-20220918111006611.png)]](https://i-blog.csdnimg.cn/blog_migrate/063990c4e40adfa6efe50d52e40d98a9.png)
3.4部署第一个Vue项目
3.4.1将已经打包好的dist文件传送到nginx以下指定目录
cd /usr/local/nginx/html
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SdFYFB2S-1663482690485)(SpringBoot+Vue项目部署.assets/image-20220918122937565.png)]](https://i-blog.csdnimg.cn/blog_migrate/c2507925361281b8bfdcb1890c90e68a.png)
3.4.1修改nginx.conf配置文件
一:进入到nginx目录下的conf目录,找到nginx.conf配置文件
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DDTPBXF-1663482690485)(SpringBoot+Vue项目部署.assets/image-20220918111316141.png)]](https://i-blog.csdnimg.cn/blog_migrate/19fe95656c70d3454aaf54f4e712c94c.png)
二:使用vim编辑 nginx.conf配置文件
解决Vue项目部署后刷新404的问题
try_files $uri $uri/ /index.html;
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kvblKpFW-1663482690485)(SpringBoot+Vue项目部署.assets/image-20220918123208327.png)]](https://i-blog.csdnimg.cn/blog_migrate/68cb067b8b4d6cab840b0fe3e93064f6.png)
三:在控制台开发相应端口
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJJihgz1-1663482690486)(SpringBoot+Vue项目部署.assets/image-20220918115322530.png)]](https://i-blog.csdnimg.cn/blog_migrate/4fca2a094611c224d276c5d13cc1b70e.png)
四:保存并退出,进入nginx的sbin目录下重启Nginx服务
./nginx -s reload
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTidJuEO-1663482690486)(SpringBoot+Vue项目部署.assets/image-20220918124639009.png)]](https://i-blog.csdnimg.cn/blog_migrate/1239e93f7a79671b4232da504c3fbaf3.png)
五:在本机浏览器输入公网ip和端口进行测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-frurISWf-1663482690486)(SpringBoot+Vue项目部署.assets/image-20220918123320066.png)]](https://i-blog.csdnimg.cn/blog_migrate/2f8dc611b2830ecf03a9daeb502c5f5b.png)
3.5部署第二个Vue项目
一:通过vim编辑器进入nginx.conf配置文件,复制server部分,放在上一个server下面
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wS4OCXFN-1663482690486)(SpringBoot+Vue项目部署.assets/image-20220918124136428.png)]](https://i-blog.csdnimg.cn/blog_migrate/eeb61bc679c19bfe70c22ae195c4a8d1.png)
二:在控制台开发相应端口
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N7eU6n92-1663482690486)(SpringBoot+Vue项目部署.assets/image-20220918124346770.png)]](https://i-blog.csdnimg.cn/blog_migrate/17b6f3f6dd8c72880640e2c47320e97a.png)
三:保存并退出,进入nginx的sbin目录下重启Nginx服务
./nginx -s reload
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kudMiJAv-1663482690487)(SpringBoot+Vue项目部署.assets/image-20220918124632898.png)]](https://i-blog.csdnimg.cn/blog_migrate/bef3aafc5ec0e779e405462b5da741fe.png)
四:在本机浏览器输入公网ip和端口进行测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HriL24Hb-1663482690487)(SpringBoot+Vue项目部署.assets/image-20220918131401928.png)]](https://i-blog.csdnimg.cn/blog_migrate/e008a788e603714f8ebe8d99149fbd41.png)
项目部署完成啦

更多推荐

所有评论(0)