公司网站在哪里做,无极县城内招聘临时工,网络营销的概念和特征,网站标题空格目录 介绍
本地项目部署 nginx部署
云端服务器部署 介绍
对于Vue项目而言#xff0c;Nginx可以轻松地配置来处理SPA的路由问题#xff0c;即对于所有未定义的路径请求返回index.html#xff0c;这样前端路由机制就可以接管URL的处理。此外#xff0c;Nginx支持反向代理设…目录 介绍
本地项目部署 nginx部署
云端服务器部署 介绍
对于Vue项目而言Nginx可以轻松地配置来处理SPA的路由问题即对于所有未定义的路径请求返回index.html这样前端路由机制就可以接管URL的处理。此外Nginx支持反向代理设置方便将前端请求转发至后端API简化开发流程。同时它还能提供基本的安全防护如限制访问、防止恶意攻击等。结合其稳定性与低资源消耗特性Nginx是部署前端Vue项目的理想选择。
本地项目部署
使用express书写一个前端服务器,将前端项目部署到该服务器上
首先进行前端项目构建 启动express服务 点击服务器路径 可以看到页面加载出来了,但是一旦刷新页面就会直接空白页,且应该显示的接口数据也没有显示出来 这里是由于前端路由出现的问题
问题分析前端项目的路由通常分为两种工作模式分别为
hash模式
hash 值又称锚点通常用于指定网页中的某个位置例如下面的网址
央视网_世界就在眼前其中的#SUBD1605080062959435就是 hash 值hash 值只在客户端如浏览器中使用是不会带给服务器的所以使用 hash 模式时不存在刷新 404 问题。
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 年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名主要功能有
反向代理负载均衡静态内容服务HTTP/2 支持SSL/TLS 支持高速缓存
使用nginx当做服务器进行部署前端服务
打开nginx目录 进入配置目录 书写配置 启动nginx 然后浏览器中输入localhost:8097 可以访问到,但是出现了和之前一样的刷新界面空白或者接口请求失败的情况
使用nginx进行404页面配置和请求转发 重启nginx 可以看到数据和页面都回归正常了
云端服务器部署
在实际开发中都是需要将项目部署到云端服务器中,部署之后使用公网ip进行访问
首先准备一个linux服务器,或者直接使用虚拟机进行部署 安装nginx 使用xftp进行服务器文件连接 找到var目录新建dist文件夹,将之前构建的dist文件夹下的静态资源全部上传到这里 来到服务器中nginx的安装目录下 找到nginx配置文件,将前面nginx的配置直接粘贴到这里,记得修改静态文件路径 启动nginx 源码
武天/vue3_study
