vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!如下:
问题原因: 刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。 如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。
服务端nginx的一开始配置如下(假设域名为:testwx.wangshibo.com): [root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf server { listen 80;
server_name testwx.wangshibo.com; root /Data/app/xqsj_wx/dist; index index.html; access_log /var/log/testwx.log main;
}
如上出现404的原因是由于在这个域名根目录/Data/app/xqsj_wx/dist下面压根就没有loading这个真实目录存在。
问题解决: 在nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下(添加下面标红内容): [root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf server { listen 80;
server_name testwx.wangshibo.com; root /Data/app/xqsj_wx/dist; index index.html;
access_log /var/log/testwx.log main;
location / { try_files $uri $uri/ @router; index index.html; }
location @router { rewrite ^.*$ /index.html last; }
}
重启nginx后,问题就迎刃而解了。
[总结:nginx配置文件里一定要定义access和error日志,出现问题要第一时间查看日志(error)]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tomcat对AQS的扩展:使用LimitLatch控制连接数
- kubernete编排技术五:DaemonSet
- 深度剖析github上15.1k Star项目:redux-thunk
- 在不影响程序使用的情况下添加shellcode
- [K8s 1.9实践]Kubeadm 1.9 HA 高可用 集群 本地离线镜像部署
- ansible模块command、shell、raw、script
- systemd - CentOS 7进程守护&监控
- Java 8的新特性还不了解?快进来!
- 【Vulnhub】Play XML Entities
- 一切皆是映射:詳解 Kotlin Map 集合類
- 10大高性能开发宝石,我要消灭一半程序员!
- 面试官:你说你会RabbitMQ,那聊聊它的交换机(Exchange)吧
- Kubeadm 1.9 HA 高可用集群本地离线镜像部署【已验证】
- kubernetes(k8s)集群安装calico
- kubernetes(k8s) Prometheus+grafana监控告警安装部署