【SDU项目实训2019级】（超详细）阿里云服务器部署与环境配置之后端vue项目

目录

1.在服务器上下载安装nginx

2.导出vue项目

​3.部署前端 

---

我们的项目是前端vue+后端springboot来实现的

关于服务器的购买、远程连接、以及springboot项目的部署具体可以查看我的另一篇博客：

（超详细）阿里云服务器部署与环境配置之后端springboot项目

现在来看看前端vue项目在服务器上的部署：

1.在服务器上下载安装nginx

nginx安装：apt install nginx

 查看nginx的安装目录：

ps -ef | grep nginx

查看配置文件 nginx.conf 路径 ：

nginx -t

我的配置文件在/etc/nginx下，启动文件在/sbin下

 2.导出vue项目

注意：在这之前记得把请求的主机地址改为服务器的主机地址，而不是本地噢~

在项目终端控制器terminal上输入：

cnpm run build

然后项目就会出现一个dist文件：

使用Xftp将文件传到服务器上：

 3.部署前端 

修改nginx配置文件

打开/etc/nginx 下的nginx.conf文件：

cd /etc/nginx
vim nginx.conf

然后我在http{}里面修改以下内容：

 关于点击其他跳转页面都会报404的错误，解决办法：

Vue是属于单页应用（single-page application）而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html。

然后我修改了以下内容，也就是上面我写的根据需要添加，但应该都要添加。。。嗯嗯

 然后进入/sbin目录启动nginx：

./nginx -s reload

 到这里前端也部署完毕了。

注意：阿里云安全组记得添加前端端口！！！！

现在看看整体效果：

在我的本地浏览器输入服务器对应的url：成功加载首页

 实现登录效果：

 前端部署基本完成~