nginx+vue刷新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+vue刷新404的更多相关文章
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- 部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)
部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...
- vue项目发布后,线上运行时刷新404
修改nginx配置文件 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } (参考官网 ...
- Nginx+CI出现404错误
最近刚学ci框架,做了个简单的项目,在本地搭服务器的环境都调通了,但是部署到远程服务器时: http://example.com/(index.php)/ 可以访问(为配置的默认controller- ...
- 【转贴】Linux系统NGINX负载均衡404错误处理方法
NGINX负载均衡404错误处理方法 使用NGINX 实现负载均衡,但一组服务器的数据不是实施同步,主服务器有了数据要过段时间才同步到其他服务器 upstream image.stream.com ...
- codeigniter(ci)在nginx下返回404的处理方法即codeigniter在nginx下配置方法
codeigniter(ci)在nginx下返回404的处理方法即codeigniter在nginx下配置方法 进入nginx的配置文件 加上一句(本来就有这句,只需要修改一下就行了) locatio ...
- URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
- 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
随机推荐
- Linux下boost库的编译、安装详解
下载boost源码 boost下载地址 解压到一个目录 tar -zxvf boost_1_66_0.tar.gz 编译boost库 进入boost_1_66_0目录中 cd boost_1_66_0 ...
- 移动采编app
大家好: 移动采编app用到了一些非该app定义的控件,比如照相机以及涉及到权限的弹窗等.这部分控件的元素id在不同品牌甚至同一品牌不同型号的手机上可能是不同的,因此安卓自动化中需要对这种情况做相应的 ...
- 猫眼电影爬取(一):requests+正则,并将数据存储到mysql数据库
前面讲了如何通过pymysql操作数据库,这次写一个爬虫来提取信息,并将数据存储到mysql数据库 1.爬取目标 爬取猫眼电影TOP100榜单 要提取的信息包括:电影排名.电影名称.上映时间.分数 2 ...
- R语言画点状误差线
现在项目需要R语言做几个线性拟合,画一些点图,突然需要画误差线,网上找了下,可以用代码实现..效果如下 xx1<-c(xxxxxx,xxxx,xxxxx) yy1<-c(xxxxxx,xx ...
- English trip V1 - B 1. How much is it? 它是多少钱? Teacher:Corrine Key: is/are
In this lesson you will learn to ask about prices. 本节课你将学习询问关于价格 课上内容(Lesson) one piece of two p ...
- WCF开山篇__图片传输
WCF开山篇__图片传输 一. 简介 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序接口,可以翻译为Windows通讯接口,它是. ...
- LeetCode--437--路径总和3
问题描述: 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点). 二 ...
- Routing a Marathon Race
直接爆搜的复杂度是2^n,对于n<=40的数据过不了. 考虑优化一下. 发现如果走了一个点后,以后是不可能再经过与它相邻的点的,因为这样走显然不如直接走那个与它相邻的点. 这样每走一步就可以删掉 ...
- URL与URI的含义及区别
1.1 什么是URI? 简单点说:URI就是通用资源标志符,不理解是吧,我第一次听说也是不理解. 进一步说:网络上的一些资源(文档.图片.音频.视频.程序等)都是有一些通用资源标识(Universal ...
- SQLServer清空表
TRUNCATE TABLE TABLE_NAME 这个不记日志. delete table table_name 这个记日志 drop table table_name 删除表 TRUNCATE 语 ...