上一回,强哥带着大家一起将一套Node项目部署到了自己的云服务器上。有些小伙伴们在问,平时自己做的都是Vue的项目,要怎么把Vue的项目部署到自己的云服务器上呢?今天强哥就来带着大家一探究竟。

1.上传代码

首先我们需要使用WinSCP等其它FTP客户端软件,将自己的Vue代码上传到服务器上。如果你使用的是Vue Cli脚手架搭建的项目,仅需要将dist目录下的所有文件上传,而不是整个项目的文件。强哥这里使用的是之前写的一个Todo List项目,没有使用到脚手架,因此将整个文件夹里的内容一起上传到home目录下即可。

springboot 转发到 vue 路由_nginx部署多个vue项目

2.配置Nginx 

接着我们进入到etc文件夹下的nginx文件夹下的nginx.conf文件,在server属性的location属性里再增加一项location信息。这里alias后面就是填写你的Vue项目代码所在服务器里文件夹的路径。后面两条是针对Vue Router下的history模式的后端配置信息,如果你没有使用Vue Router的history模式,这两行配置写不写都是无所谓的。

springboot 转发到 vue 路由_nginx部署vue_02

3.重启Nginx

配置完Nginx之后,我们需要进入云服务器的控制台,使用systemctl restart nginx命令重启Nginx。这个时候,我们发现控制台里报错了,出现了一段错误信息。

springboot 转发到 vue 路由_nginx部署多个vue项目_03

这是为什么呢?我们可以使用nginx -t命令来检查错误。

springboot 转发到 vue 路由_nginx部署vue_04

原来是因为我们的nginx的配置有问题。从错误信息中我们可以看到,它提示我们使用了重复的路径,我们重新打开nginx.conf文件,发现的确是使用了两个相同的location /,我们把我们的Vue项目改成location /todolist,然后在控制台里再次运行systemctl restart nginx命令,这次命令执行就没有见到错误信息了。

springboot 转发到 vue 路由_nginx部署vue项目_05

此时我们在我们的域名加入/todolist这个路径后,就能访问到我们这个Vue项目的内容了。

springboot 转发到 vue 路由_nginx部署多个vue项目_06

PS: 强哥这是一个没有使用脚手架的简单的项目,如果你的项目是使用脚手架的话,可能就不会那么顺利了,比如之前强哥在部署一个后台管理系统的时候,就发现打开页面后一片空白,控制台里报错说找不到相应的css和js文件,经过研究这是因为当时强哥的那个项目里资源路径配置有问题,需要在vue.config.js中增加一个publicPath属性指向当前根目录路径,否则的话就会出现本地环境没问题,部署到生产环境后就不行的情况。大家需要根据自己的实际报错情况进行分析解决。

springboot 转发到 vue 路由_nginx部署vue项目_07