码迷,mamicode.com
首页 > 其他好文 > 详细

VUE页面刷新404

时间:2019-08-11 13:22:53      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:强制退出   tar -zcvf   html5   netstat   mod   tar   data   www   href   

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 文件地址

 

VUE页面刷新404

标签:强制退出   tar -zcvf   html5   netstat   mod   tar   data   www   href   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!