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

古城微笑少年丶 2023-09-28 08:34 14阅读 0赞

**目录**

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

2.导出vue项目

3.部署前端

--------------------

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

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

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

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

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

nginx安装：apt install nginx

![d9814110fc404cfa9f127c529a7eb7ce.png][] 查看nginx的安装目录：

ps -ef | grep nginx

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

nginx -t

![017d421001394876ba7c9b68e34b8333.png][]

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

### 2.导出vue项目 ###

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

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

cnpm run build

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

![c05d8c13047f4dd4b92bdc410703fff9.png][]

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

### ![424d109195c444579323240e1072ccde.png][]   3.部署前端 ###

**修改nginx配置文件**

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

cd /etc/nginx
    vim nginx.conf

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

![611545709cd94a2a8ea41ffeff5d8d22.png][]

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

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

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

![9daa59fb17db443182c79aeeaad58b25.png][]

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

./nginx -s reload

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

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

![f33c21c015884d1093971dde7932e652.png][]

**现在看看整体效果：**

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

![299858800cb94a20a00de2b74ab4544f.png][]

实现登录效果：

![298d9c409e7541f9843dd3fd60cac4ae.png][]

前端部署基本完成~

[springboot]: https://blog.csdn.net/weixin_45704996/article/details/125031572
[d9814110fc404cfa9f127c529a7eb7ce.png]: https://img-blog.csdnimg.cn/d9814110fc404cfa9f127c529a7eb7ce.png
[017d421001394876ba7c9b68e34b8333.png]: https://img-blog.csdnimg.cn/017d421001394876ba7c9b68e34b8333.png
[c05d8c13047f4dd4b92bdc410703fff9.png]: https://img-blog.csdnimg.cn/c05d8c13047f4dd4b92bdc410703fff9.png
[424d109195c444579323240e1072ccde.png]: https://img-blog.csdnimg.cn/424d109195c444579323240e1072ccde.png
[611545709cd94a2a8ea41ffeff5d8d22.png]: https://img-blog.csdnimg.cn/611545709cd94a2a8ea41ffeff5d8d22.png
[9daa59fb17db443182c79aeeaad58b25.png]: https://img-blog.csdnimg.cn/9daa59fb17db443182c79aeeaad58b25.png
[f33c21c015884d1093971dde7932e652.png]: https://img-blog.csdnimg.cn/f33c21c015884d1093971dde7932e652.png
[299858800cb94a20a00de2b74ab4544f.png]: https://img-blog.csdnimg.cn/299858800cb94a20a00de2b74ab4544f.png
[298d9c409e7541f9843dd3fd60cac4ae.png]: https://img-blog.csdnimg.cn/298d9c409e7541f9843dd3fd60cac4ae.png