ideaspringboot项目上传服务器_手把手带你将Vue项目部署到云服务器

最新推荐文章于 2023-07-20 09:25:04 发布

weixin_39946429

最新推荐文章于 2023-07-20 09:25:04 发布

阅读量285

点赞数

文章标签： ideaspringboot项目上传服务器 linux部署vue项目 nginx部署vue nginx部署vue项目 nginx部署多个vue项目 nginx配置vue项目500

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

1.上传代码

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

2.配置Nginx

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

3.重启Nginx

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

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

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

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

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