问题原因:
刷新页面时访问的资源在服务端找不到,因为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的更多相关文章

  1. vue react 路由history模式刷新404问题解决方案

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

  2. 部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)

    部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...

  3. vue项目发布后,线上运行时刷新404

    修改nginx配置文件 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } (参考官网 ...

  4. Nginx+CI出现404错误

    最近刚学ci框架,做了个简单的项目,在本地搭服务器的环境都调通了,但是部署到远程服务器时: http://example.com/(index.php)/ 可以访问(为配置的默认controller- ...

  5. 【转贴】Linux系统NGINX负载均衡404错误处理方法

    NGINX负载均衡404错误处理方法 使用NGINX 实现负载均衡,但一组服务器的数据不是实施同步,主服务器有了数据要过段时间才同步到其他服务器 upstream   image.stream.com ...

  6. codeigniter(ci)在nginx下返回404的处理方法即codeigniter在nginx下配置方法

    codeigniter(ci)在nginx下返回404的处理方法即codeigniter在nginx下配置方法 进入nginx的配置文件 加上一句(本来就有这句,只需要修改一下就行了) locatio ...

  7. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  8. 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题

    解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...

  9. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

随机推荐

  1. MYSQL常用函数(格式化函数)

    DATE_FORMAT(date,fmt)  依照字符串fmt格式化日期date值 FORMAT(x,y)   把x格式化为以逗号隔开的数字序列,y是结果的小数位数 INET_ATON(ip)   返 ...

  2. https 学习笔记

    参考 : http://www.cnblogs.com/JimmyZhang/archive/2008/10/02/Cryptograph.html https://blog.csdn.net/Jog ...

  3. ffmpeg 加 logo

    How to add a watermark or logo to any corner or the center of a video with FFMPEG. ffmpeg –i video.m ...

  4. 雷林鹏分享:XML - E4X

    XML - E4X E4X 向 JavaScript 添加了对 XML 的直接支持. E4X 实例 var employees= Tove 32 Jani 26 ; document.write(em ...

  5. Android 如何更改一个 imageview的颜色

    xml中可以使用tint属性 tips:这里的图片必须是png格式的文件才行,不然你得到的就是一个被纯色覆盖的图 java中 使用 imageView.setColorFilter(Color.WHI ...

  6. 配置Tomcat配置路径

    <Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...

  7. 说说secondarynamenode作用和配置

    说说secondarynamenode作用 http://my.oschina.net/u/1464779/blog/289895 说说secondarynamenode的配置 hadoop2.X如何 ...

  8. MySQL补充

    1.mysql限制显示条目数:Limit, offset 图片网址:https://sqlbolt.com/lesson/filtering_sorting_query_results 实例: SEL ...

  9. array_multisort以及php中的排序函数

    1. array_multisort(array_column($arr, $key), SORT_DESC, $arr); // 根据二维数组中的某一列对数组进行增序或者降序排列 什么是关联数组呢? ...

  10. 安卓——AlertDialog多样按钮

    在xml 设计页面添加标签 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln ...