将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;