解决 nginx部署多个vue项目刷新、访问路由页面404

解决 nginx部署多个vue项目刷新、访问路由页面404,第1张

问题

使用nginx 部署vue项目的时候 当我们刷新页面的时候,或者访问路由配置页面的时候会直接提示404!

分析

这个问题不是BUG,而是因为通常我们做的vue项目属于单页面开发。所以只有index.html;
解决这个问题也很简单。只需要将访问重定向到 index.html这个页面,交由 index.html 去处理对应的路由跳转就好。
刷新页面时访问的资源在服务端找不到,由于vue-router设置的路径不是真实存在的路径。
如上的404现象,是由于在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。

解决

在nginx配置里添加vue-route的跳转设置(这里首页是index.html,若是index.php就在下面对应位置替换),正确配置以下(添加下面标红内容):

方法1:

只限于配置一个项目
[root@test-huanqiu ~]# cat /home/soft/nginx/conf/default.conf

server {
    listen       80;
   server_name  localhost; #这里可以直接添加IP
	location / {
	         root /home/soft/nginx/html/dist; #dist为打包后的文件
             try_files $uri $uri/ @router;  #
             index index.html;
        }
    #路由配置信息 (解决页面刷新404问题)
	location @router {
            rewrite ^.*$ /index.html last;
        }
		}

重启nginx后,问题解决;
[总结:nginx配置文件里必定要定义access和error日志,出现问题要第一时间查看日志(error)]

方法2:

在nginx的server里加上此段配置,有多个vue工程则每一个都配一个。若不配的话页面也能打开,只是二级页面刷新会404

server {
    listen       80;
    server_name  localhost;
    location /dist1 {
        #如果是docker部署,一定要配置容器里面挂载的目录;
        alias   /usr/share/nginx/html/dist1; 
        #项目存放地址里边包含static、index.html;就是前端打包的dist文件;
        index  index.html index.htm;
        try_files $uri $uri/ /dist1/index.html; #解决页面刷新404问题
    }
    location /dist2 {
        alias   /usr/share/nginx/html/dist2;
        index  index.html index.htm;
        try_files $uri $uri/ /dist2/index.html; #解决页面刷新404问题
    }
    location /dist3 {
        alias   /usr/share/nginx/html/dist3;
        index  index.html index.htm;
        try_files $uri $uri/ /dist3/index.html; #解决页面刷新404问题
    }
    location /dist4 {
        alias   /usr/share/nginx/html/dist4;
        index  index.html index.htm;
        try_files $uri $uri/ /dist4/index.html; #解决页面刷新404问题
    }
    }

个人理解:$uri表示访问的页面 $uri/表示配置的根路径,若是路径下没有,则跳转到根路径下的/project/index.html
希望可以帮助到大家,欢迎大家留言交流,一起共同学习!

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1298025.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-10
下一篇2022-06-10

随机推荐

  • 留学美国新罕布什尔大学开设课程

    开设课程立思辰留学360了解到,新罕布什尔大学现有1万余名本科生在校生,2000余名研究生。大学开设的各类课程都鼓励学生进行跨学科的学习,大学下设6个学院,开设了100多个专业的2000多门课程,学生

    2022-07-03
    000
  • 留学美国卡内基梅隆大学声誉

    卡内基梅隆大学(Carnegie Mellon University),简称CMU,坐落在宾夕法尼亚州的匹兹堡(Pittsburgh),是一所美国著名的研究型大学,该校拥有全美顶级计算机学院和戏剧学院

  • 2017年加拿大卡尔加里大学排名怎么样

    立思辰留学360介绍:卡尔加里大学成立于1945年,原属阿尔伯塔大学,1966年成为独立的大学。在短短40年里,卡尔加里大学已经飞速发展成为加拿大最重要的研究类大学之一。该大学位于加拿大西部省份阿尔伯

    2022-07-03
    000
  • 京畿大学研究生入学学费介绍

      据立思辰留学360介绍,韩国京畿大学校建于1947年,是一所拥有首尔、水原两个校区的综合性私立大学。目前,在校学生规模达17,000余人。首尔(Seoul)校区以研究生院为主,水原(Suwon)校

    2022-07-03
    000
  • 关于英国诺丁汉特伦特大学基本信息,你知道哪些

    据立思辰广州留学360杨煜姬老师介绍,诺丁汉特伦特大学位于诺丁汉市,由三大校区组成,分别是位于市中心的City Campus, 离市中心30分钟车程的Clifton Campus,和40分钟车程的br

    2022-07-03
    000
  • 马来西亚精英大学排名怎样

    很多学生想知道精英大学的排名,小编给大家的建议是排名这种东西只能借鉴参考,不如一起来看看精英大学的杰出成就:1、精英大学时全球为伦敦大学和伦敦经济学院提供一等荣誉学士学位毕业生最多的一所海外办学机构。

    2022-07-03
    000
  • 卡迪夫大学全能院校

    卡迪夫大学是英国主要的大学之一,其历史和贡献可追溯到1883年。如今,其国际声誉吸引了来自英国以及100多个海外国家的学生和工作人员。大学以其领先的科研水平而闻名;根据政府最近的评估,大学的许多科研项

    2022-07-03
    300
  • 贝德福特大学高性价比

    立思辰留学360介绍说,英国贝德福特大学是一所有一百二十余年历史的。 优越的地理位置(地处伦敦、牛津、剑桥学术金三角的中心)让贝德福德大学具备了学习和研究独特并且深厚的条件和文化底蕴。高性价比贝德福特

    2022-07-03
    000
  • 2017年卡皮兰诺大学申请条件介绍

    据立思辰留学360了解,卡皮兰诺大学是加拿大不列颠哥伦比亚省的一所政府公立院校,建立于1968年。发展到现在,该校已经在国际教育上颇有建树,以提供固定的基本学术课程和不断增加顺应市场需求的专业而闻名。

    2022-07-03
    000

发表评论

登录后才能评论

评论列表(0条)

    保存