问题原因:
刷新页面时访问的资源在服务端找不到,因为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. 学习笔记35—大话 Word和Excel

    1.word中,加粗表格线条:设计---->笔画粗细. 2.Excel中,冻结某一行:点击工具栏中的视图→冻结空格→冻结单元格. 3.word中,输入卡方符号:插入----> 符号 --- ...

  2. MyEclipse下自定义(支持html5的)JSP模板--JSP

    需求:由于某些Mclipse版本发行的比较早,所以在有些版本(比如Mclipse2014,至于其他版本博主不知能不能创建html5格式的JSP页面)里创建JSP页面时html部分不是html5格式的. ...

  3. WAV和PCM文件转换的程序

    using System;using System.IO;using System.Text;using System.Windows.Forms;using System.Runtime.Inter ...

  4. LeetCode--012--整数转罗马数字(java)

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  5. python3-知识扩展扫盲易忘-map,collections.Counter()的用法

    map() 会根据提供的函数对指定序列做映射. 第一个参数 function 以参数序列中的每一个元素调用 function 函数,返回包含每次 function 函数返回值的新列表. >> ...

  6. navicat和 plsql 连接oracle数据库 总结

    打开 navicat  -->工具-->选项-->oci   右侧选择oci.dll 的路径 默认 在 navicat的安装目录下有一个 instantclient 的文件夹 直接选 ...

  7. Confluence 6 删除一个空间

    删除一个空间将会完全删除空间和空间的所有内容,包括有关这个空间的所有日历,和链接到这个空间中的问题.只有具有空间管理员权限的用户才能够完全删除一个空间.  删除空间是完全从系统中删除的.一旦你删除了一 ...

  8. linux中的软、硬链接

    linux中的软.硬链接 硬链接 硬链接(hard link),如果文件B是文件A的硬链接,则A的inode节点号与B的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件名指向同 ...

  9. linux Boot目录满了之后的解决方法

    boot目录为什么会满? Linux默认分区时,boot分区就200多M,按理说也不小,足够了(实际也就几十M),但是内核经常性的升级,而且自己又不自动卸载,于是该目录下旧的内核文件越积越多,最后就满 ...

  10. web功能模块测试用例(模板)

    web功能模块测试用例(模板): https://wenku.baidu.com/view/4ada3464ddccda38376baff8.html 如图所示: