问题原因:
刷新页面时访问的资源在服务端找不到,因为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. 牛客小白月赛7 CSL的校园卡

    CSL的校园卡 思路: bfs,用状压表示走过的区域,然后和x1,y1,x2,y2构成所有的状态,然后标记一下就可以了 代码: #pragma GCC optimize(2) #pragma GCC ...

  2. Codeforces 994 C - Two Squares

    C - Two Squares 思路: 点积叉积应用 代码: #include<bits/stdc++.h> using namespace std; #define fi first # ...

  3. python实现邮件接口——smtplib模块

    1. 思路 使用脚本发送邮件的思路其实和客户端发送邮件一样,过程都是: 登录 —> 写邮件 —> 发送 只不过通过脚本发送时我们需要考虑到整个过程的方方面面.以下为思路导图: 2. Pyt ...

  4. Axure 元件的移动效果

    元件的移动主要是指当点击某一元件(登录)时,某些元件会发生移动或者是左右移动的动画效果,先将登录界面设置为动态面板,然后再设置动作 本节主要应用于一下三种场景: 1.当邮箱不为空.密码为空时,点击登录 ...

  5. C# 读取word2003 并且显示在界面上的方法

    1.新建一个windows窗体程序 2. 引入包WinWordControl.dll 3.添加引用 4.引入组件WinWordControl组件 5.主界面上加入按钮 ,opendialog, win ...

  6. spring boot+freemarker+spring security标签权限判断

    spring boot+freemarker+spring security标签权限判断 SpringBoot+SpringSecurity+Freemarker项目中在页面上使用security标签 ...

  7. LeetCode--350--两个数组的交集2

    问题描述: 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = ...

  8. Ubuntu/Debian nginx 简介

    Linux运营维护(简称运维) 这里是简单的使用介绍: 参考:http://einverne.github.io/post/2017/06/ubuntu-debian-install-nginx.ht ...

  9. Confluence 6 修改一个空间从归档到当前

    通过空间目录: 进入头部的 空间(Spaces ) > 空间目录(Space directory). 在左侧 选择 归档的空间(Archived Spaces). 找到你的空间,然后单击右侧的  ...

  10. 电脑用U盘启动

    除了根据提示按DEL或者F2进入到BIOS界面更改设置之外. 还可以在开机时按F8或F12进入到引导界面,可直接选择USB. 当把登录用户登录,其他用户都被禁用时,电脑登不进去.要制作启动U盘,进入到 ...