Vue+Nginx前端项目多种方式部署一文搞定(练习源码自取)

目录

介绍

本地项目部署

 nginx部署

云端服务器部署

---

介绍

对于Vue项目而言，Nginx可以轻松地配置来处理SPA的路由问题，即对于所有未定义的路径请求返回index.html，这样前端路由机制就可以接管URL的处理。此外，Nginx支持反向代理设置，方便将前端请求转发至后端API，简化开发流程。同时，它还能提供基本的安全防护，如限制访问、防止恶意攻击等。结合其稳定性与低资源消耗特性，Nginx是部署前端Vue项目的理想选择。

本地项目部署

使用express书写一个前端服务器,将前端项目部署到该服务器上

首先进行前端项目构建

启动express服务

 点击服务器路径

可以看到页面加载出来了,但是一旦刷新页面就会直接空白页,且应该显示的接口数据也没有显示出来

 这里是由于前端路由出现的问题

问题分析：前端项目的路由，通常分为两种工作模式，分别为：

1. hash模式

hash 值又称锚点，通常用于指定网页中的某个位置，例如下面的网址：

央视网_世界就在眼前，其中的#SUBD1605080062959435就是 hash 值，hash 值只在客户端（如浏览器）中使用，是不会带给服务器的，所以使用 hash 模式时，不存在刷新 404 问题。

1. history模式

history 去掉了URL中的#号，可以让应用的URL看起来更美观，带来的问题就是刷新时，会将前端路由携带给后端，而后端没有对应资源的匹配，就出现了 404 问题。

 重新构建,将调整为hash模式后进行构建后的dist重新放入前面的服务其中,重启测试

可以看到重新刷新页面时不会再有空白页的问题了   但是这种方案并不是太好,因为路劲中会携带#并不美观

可以让服务器在收到未配置的GET路由时，都返回index.html即可。
最终其实是把 url 中的 path，交给了前端路由去处理，具体配置如下：

也可以借助connect-history-api-fallback中间件完成配置

安装中间件

npm i connect-history-api-fallback

使用connect-history-api-fallback可以让配置更灵活，比如/login临时不需要作为前端路由处理，就可以按照如下方式配置

 重启测试

可以看到页面刷新后没有变空白页且路径也没有#

来看下异步请求没有发送出去的问题

脱离脚手架后，就没有了代理服务器，无法转发请求到【提供数据】的服务器。

如何解决？—— 在 Node 服务器中借助http-proxy-middleware中间件配置代理，具体配置如下：

 重启测试

可以看到页面没有再报错404请求,并且拿到了接口数据

 nginx部署

Nginx（发音为“engine-x”）是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写，于 2004 年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名，主要功能有：

1. 反向代理
2. 负载均衡
3. 静态内容服务
4. HTTP/2 支持
5. SSL/TLS 支持
6. 高速缓存

使用nginx当做服务器进行部署前端服务

打开nginx目录

进入配置目录

 书写配置

启动nginx

 然后浏览器中输入localhost:8097

可以访问到,但是出现了和之前一样的刷新界面空白或者接口请求失败的情况

使用nginx进行404页面配置和请求转发

重启nginx

 可以看到数据和页面都回归正常了

云端服务器部署

在实际开发中都是需要将项目部署到云端服务器中,部署之后使用公网ip进行访问

首先准备一个linux服务器,或者直接使用虚拟机进行部署

安装nginx

 使用xftp进行服务器文件连接

找到var目录新建dist文件夹,将之前构建的dist文件夹下的静态资源全部上传到这里

 来到服务器中nginx的安装目录下

找到nginx配置文件,将前面nginx的配置直接粘贴到这里,记得修改静态文件路径

 启动nginx

源码

武天/vue3_study