nginx配置vue-router+webpack项目部署访问刷新出现404问题
2017-10-16 22:01
1636 查看
部署背景和问题描述
项目使用的是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问题
相关文章推荐
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- react,vue等部署单页面项目时,访问刷新出现404问题
- vue-route+webpack单页路由项目,打包后访问正常刷新出现404问题
- Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
- Nginx+Tomcat部署Angular+javaweb项目(解决刷新404)
- Vue项目webpack打包部署到Tomcat,刷新报404错
- 问题记录:myeclipse配置好struts2后,web项目运行出现404
- 同一个tomcat下面部署了两个项目,有一个访问不了404,web项目配置webAppRootKey
- webpack编译多页面vue项目的配置问题
- Nginx+Tomcat部署Angular+javaweb项目(解决刷新404)
- Vue-router+webpack单页项目服务器部署(nginx)
- 【vue-cli】vue-cli+webpack配置下局域网,手机无法访问绑定ip的vue项目
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- 关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
- 详解webpack编译多页面vue项目的配置问题
- 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
- 【问题记录】web项目访问时出现404
- Tomcat部署Web项目访问404问题