将Vue+Springboot项目部署到云服务器

将Vue+Springboot项目部署到云服务器:

提示:Vue+springboot项目部署到云服务器

提前准备:
1.阿里云服务器(这个是可以白票的,地址放这里链接: 阿里云学生认证
2.自己的Vue项目


部署项目

部署代码可以用远程连接工具,也可以用宝塔面板,宝塔面板会帮我们自动配置服务器环境

提示:部署后端代码
1.打开IntelliJIDEA,用maven包管理工具将自己的后端代码打包成jar包
在这里插入图片描述

2.打包好了以后会生成一个jar包
在这里插入图片描述
3.将jar包放到云服务器的根目录下的目录下面(可以在云服务器跟目录下新建一个文件夹并放到该文件夹下面)
在这里插入图片描述
4.在宝塔面板的网站选项里创建一个Java项目
在这里插入图片描述
5.项目类型选择Springboot,jar路径根据自己的安装路径选择,选择自己项目里指定的端口号,切记端口要开放,否则项目不能被访问
在这里插入图片描述
6.选择前后端分离和开机启动,后端url填写mysql的请求地址,目标url一般不变,前端根目录是我们Nginx根目录下的html文件夹,然后提交
在这里插入图片描述
7.至此后端代码部署完成
提示:部署前端代码
1.打开WebStorm,用npm包管理工具将前端代码打包生成dist文件夹
打包命令:npm run build
在这里插入图片描述
2.现在只需要将dist文件夹里的文件放到我们在上面第6里选择的前端根目录里面
在这里插入图片描述
3.至此我们的前端代码也部署完毕,现在用自己的服务器ip地址+端口号就可以在公网访问自己的项目咯,附一张效果图
在这里插入图片描述


网页刷新后报“找不到路径”错误:

提示:细心的兄弟会发现Nginx的根目录下只有一个index.html文件,这样的话第一次访问可以找到index.html文件,但是一旦不在根目录的时候进行刷新,服务器就会找不到目标路径,这个时候我们需要告诉服务器找不到路径就返回根目录找


解决方案:

提示:所以需要在Nginx的配置文件下面添加一些配置代码,话不多说直接上代码

 	  location / {
          root   /www/server/nginx/html;
          index  /www/server/nginx/html/index.html;
          try_files $uri $uri/ /index.html;#解决页面刷新404
      }

这个时候可能会遇到静态资源找不到的问题:

提示:找不到静态资源文件肯定时路径问题,所以不慌,先看一下Nginx的配置文件,检查自己的根目录是否是Nginx的根目录,这里要注意上面的root和index的路径要保持一致

 	listen 80;
    server_name 8.130.105.128;
    index /www/server/nginx/html/index.html;
    root  /www/server/nginx/html;
  • 3
    点赞
  • 71
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值