nginx配置vue-router+webpack项目部署访问刷新出现404问题
来源:互联网 发布:input type js修改 编辑:程序博客网 时间:2024/06/16 00:41
部署背景和问题描述
项目使用的是vue2.0,vue-route,webpack打包
项目部署使用的nginx
问题描述:
正常首页不加index可以访问
如:浏览器输入192.168.0.251可以正常访问并返回
但是当按下F5或者刷新页面时就出现如下404错误
这还是不是最明显的最明显的如这种目录192.168.0.251/user
基便不刷新而只是访问依然是报的404
原因
打开开发包我们会看到除了index.html根本就不存在如上的index和user文件,当然是找不到的因此就返回了404错误。
vue-router项目的url实现方式
本人并无具体参考vue-router源码,以下内容只是根据项目和当前项目部署需要的经验之谈,如有不对,请各位指正。
涉及到url必然要弄清楚vue-router中url的作用和普通项目的作用原理是否相同。
vue-router项目归根结底是因为vue-router其本身只存在一个index.html文件,index.thml中只会加载一个打包过的js文件,该文件主要执行的路由规则如下:
- 获取当前的URL
- 获取URL除IP:端口和?之间的部分路径参数(如:http://baidu.com/query?w=1获取到的路径是/query和参数w=1)
- 根据路径参数查找路由中是否存在该路径,存在则传入参数(如w=1)给该方法并执行相关js方法进行dom渲染,不存在则返回空内容(和nginx的404不同)
- 渲染元素和dom(包括空内容)到index.html的body标签中
- 完成渲染呈现页面在客户端(视觉上发生变化)
可以看到整个过程除了URL变动但是实际上html的外层DOM标签是没有变化和重新加载的(body标签和它的父标签),而我们平常的常规项目需要真实的路径对应到项目中的实际文件匹配然后服务器找到后返回给客户端(找不到就报404错误)。
解决思路
因此找到原因就好办了,只需要当服务器发现客户端发来的url时就重定向(服务器重定向)到默认的index.html文件内容并返回给客户端,这样就实现了它的自身的路由功能。
但是也会出现一下问题,比如多个项目使用同一个域名和ip地址的情况,虽然vue项目可以正常访问,但是其他类型的项目显然会问题(一直停留在首页不动,至少是在视觉上不动)。这时就需要根据不同的项目名设置不同的规则,这个内容请参考另外的的文章:nginx配置多个项目(太简单了没写,自行百度)
解决方法
server { listen 80; server_name testwx.wangshibo.com; root /mnt/app/xm_web; index index.html; # access_log /var/log/testwx.log main; #处理vue-router路径Start #如果找不到路径则跳转到@router变量中寻找,找到了就默认进入index.html location / { try_files $uri $uri/ /index.html last; index index.html; } #处理vue-router路径End}
配置完成重启,可以成功刷新和点击进入其他页面。
声明:对于vue-router部分的理解并不到位,如有疏漏和错误,请各位拍砖,谢谢。
参考资料:
散尽浮华的博客:vue-route+webpack部署单页路由项目,访问刷新出现404问题
vue-route+webpack部署单页路由项目,访问刷新出现404问题
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack单页路由项目,打包后访问正常刷新出现404问题
- vue-cli的webpack项目,webpack-hot-middleware热加载热部署有时候不刷新页面
- vue-2.x webpack 安装vue-router 配置路由
- vue-router使用 history 模式刷新后404问题
- Vue-cli+router+webpack
- 使用webpack创建vue项目,安装vue-router和不安装vue-router的区别
- vue-cli + webpack + vue-router
- nginx部署访问vue-cli搭建的项目
- Vue-webpack项目配置详解
- webpack编译多页面vue项目的配置问题
- 用vue-router和webpack搭建路由项目
- vue配置 webpack构建vue项目
- 关于vue+router+webpack项目开发前期报错:找不到 module vue-router
- Vue项目webpack打包部署到服务器
- nginx部署Vue前端项目
- sqlite数据库代码封装
- apache httpd.conf配置文件详解
- NOIP2011 DAY2 T2 浅谈二分答案
- 38. Count and Say
- 推荐一个大佬
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- Codeforces 876A. Trip For Meal
- MVC框架
- 计算机基础
- 水平居中总结-不定宽块状元素
- Java 操作基本数据类型的流
- 栈和队列考点
- Redis数据结构list的任务队列
- Programming学习1_ASP、JSP、PHP 、Perl、.NET 等WEB开发语言比较