vue 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)]
最新文章
- MIP改造常见问题二十问
- 一个App完成入门篇(六)- 完成通讯录页面
- 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
- lrzsz在CentOS7的安装
- C-指针和数组的区别
- 踏着前人的脚印学Hadoop——RPC源码
- A*寻路算法的探寻与改良(二)
- Swift中类的初始化器与继承
- SQL数据库的应用一(Day 24)
- 如何实现TWaver 3D颜色渐变
- JavaScript学习日志(二):面向对象的程序设计
- Oracle 11gR2 用exp无法导出空表解决方法
- 发布到FaceBook试玩广告,FaceBook要求要一个Html文件
- 手把手教你使用 Clion 开发 Linux C++ 项目
- MySQL Error--Got error 28 from storage engine
- fabric 在阿里云Ubuntu部署 注意
- 单点登录(SSO)原理与案例
- office excel中怎么添加批注及修改批注用户名
- IE11 F12工具报错
- 02 Maven 入门使用