使用vue-router 刷新 404错误

修改nginx.conf

server {
        listen       80;
        server_name  demongao.com www.demongao.com;
        root         /demongao/vueblog/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
时间: 2024-12-30 02:32:30

使用vue-router 刷新 404错误的相关文章

VUE页面刷新404

1.配置nginx(nginx和项目要在一台机器上) 当访问vue页面时,直接访问url会被http server直接解析到该文件路径,但是spa的路由是虚拟的,并不能直接找到这个file,所以会404: 需要把所有的请求全部指向(不知道这么说是不是准确)index,然后让js的router解析url, nginx 需要配置 try_files $url /index.html (出现该问题的原因,可查看HTML5 History 模式:https://router.vuejs.org/zh/g

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

部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作Linux系统的工具极力推荐FinalShell. 一眼看过去是不是感觉很方便,对内存.CPU的监控也可以实时看到,访问目录更是方便,对于Linux小白来说简直是神兵利器. 好了,我要开始入坑了. 问题一:权限不够 把vue包放到tomcat->webapps->ROOT目录下. 启动tomcat:

Vue路由History模式打包后页面空白,刷新404

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口 vue中配置保持不变 nginx中配置如下: server { listen 8899; server_name localhost; location / { try_files $uri $uri/ /index.html; } } 第二种就是 # 打包配置 config-index.js 修改路径: assetsPublicPath: './'; # 前端路由配置 router.js: const rou

解决使用angular2路由后,页面刷新后报404错误。

点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,LocationStrategy} from '@angular/common'; 并在 providers下添加所引入的服务: providers: [{provide: LocationStrategy,useClass: HashLocationStrategy}] 备注:出现问题的原因:刷新页面时寻

vue router 如何使用params query传参,以及有什么区别

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人blog:obkoro1.com Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/route

Vue Router 路由实现原理实现原理

一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash --- 利用 URL 中的hash("#"); 2.利用 History interface 在HTML5中新增的方法. Vue 中,它是通过 mode 这一参数控制路由的实现模式: const router=new VueRouter({ mode:'history', routes:[

struts2中<jsp:forward>跳转时报404错误的问题

index.jsp页面: <jsp:forward page="show.action"></jsp:forward> 在struts.xml配置如下: <package name="struts2" extends="struts-dafult"> <action name="show" class="action.ShowAction"> <resu

koa2 get请求后台正常接收参数 前端报404错误

刚学习一门技术时,总会踩一些坑. 前端代码 function del(mId){ $.ajax({ type:"get", url:"/delUser", data:{id:mId}, success:function(data){ console.log('成功了'); console.log(data); } }); } 后台接收请求代码 router.get('/delUser',async (ctx,next)=>{ console.log('接收请求

404错误处理:重定向还是直接404?(摘录)

小型网站开发通常会使用某种Web应用框架,比如类似Spring.Express.Django等框架. 这些框架会给出自定义错误页面的方式.当404发生时Web框架会渲染并返回对应的错误页面. 这是最自然和直接的错误处理方式,但有时我们希望错误页面可以单独Serve,比如放到CDN上. 本文档依据RFC 2616(HTTP 1.1)比较几种常见的404错误处理方法: 返回具有404信息的页面,同时给出404状态码. Google.Github.Facebook.Amazon.Linkedin. 重