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/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

nginx里配置修改:

http {

     #front
    server {
        listen       80;
        server_name  localhost;

        location / {
             root   /data/............;  #前端项目路径
             index  index.html;
        }
        error_page   404 500 502 503 504  /index.html;
        location = /index.html {
            root   /data/............;
        }
    }
}

2、也可在前端代码所在的tomcat中的web.xml中配置

<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page> 

如下图:

这个方式有一个弊端,虽然可以解决404的显示问题,但是这个404会被浏览器捕获到,这就造成一个坑,如果你的WEB项目是在微信中打开的,微信捕获到404后,就会重定向到公益页面,就造成了刷新,直接跳到了公益页面。

3、一些linux命令

命令:su     -- 切换到root,然后会提示输入密码

cat nginx.conf   查看该文件
vim nginx.conf   编辑该文件
insert键    开始编辑
先按Esc,然后【Shift+:】,然后【wq!】保存并强制退出    --- 编辑好后,退出

查看当前所在目录:
cd ~
pwd

查看nginx进程:
ps -ef|grep nginx
ps -ef 查看全格式的全部进程
ps -ax 查看全部进程
ps -ef|grep <进程名> 查看并筛选 跟进程名有关的进程,该进程名可以是进程的全部或者部分

测试机器能不能访问外网
curl http://www.baidu.com

查看80端口是否被占用:(监控状态为LISTEN表示已经被占用)
netstat -anp |grep 80
查看当前所有已经使用的端口情况:
netstat -nultp    

创建nginx文件夹:
mkdir /mnt/data/nginx
删除nginx文件夹:
rm -rf /mnt/data/nginx

解压资源包:
tar -zxvf 压缩包名

查找sbin文件
find / -iname sbin

搜索tomcat里catalina.sh文件中某一内容,如:cygwin=false
grep cygwin=false catalina.sh
grep -n cygwin=false catalina.sh   (并输出所在行数)

查看”cygwin=false“内容在某目录下,哪个文件中,并输出行数
grep -n cygwin=false /apache-tomcat-7.0.90/bin/*

改变nginx文件的拥有者和群组:
chown -R app:app /mnt/data/nginx

赋予nginx目录读写等权限给app这个用户:
chmod 755 /mnt/data/nginx

打tar包:
tar -zcvf 文件名+日期.tar.gz 文件地址

原文地址:https://www.cnblogs.com/weilz/p/11334452.html

时间: 2024-11-02 11:12:40

VUE页面刷新404的相关文章

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

原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149   由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / in

vue:vue页面刷新vuex数据消失问题

vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数里请求,b页面用的数据b页面的生命周期函数里请求 你需要知道JavaScript代码是运行在内存中的,代码运行时的所有变量,函数,也都是保存在内存中的.刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想储存就必须储存在外部,例如:Local Storage, Sessi

vue 页面刷新

app.vue <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide() { return { reload: this.reload } }, data (

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

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

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

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

vue el-form鼠标事件导致页面刷新解决方案;vue 阻止多次点击提交数据通用方法

一.阻止表单自动提交刷新页面:<el-form> <el-form-item :inline="true" @submit.native.prevent> <el-input @keyup.enter.native='submit'></el-input> </el-form-item> </el-form> 注意: 鼠标事件导致页面刷新问题,在el-form上增加 @submit.native.prevent 可

vue项目刷新当前页面

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

Vue. 之 刷新当前页面,重载页面数据

Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 script代码块添加:watch模块,如下代码: ... ... mounted : function() { this.loadData(); }, watch: { //监听相同路由下参数变化的时候,从而实现异步刷新 '$route'(to,from) { this.loadData(); }, },