[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题
Posted 豌豆爸爸
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题相关的知识,希望对你有一定的参考价值。
应用为VUE单页应用,路由模式为history,web服务器为nginx,正常情况下如果直接通过url访问一个中间页(不是index.html)时,会看到nginx返回的404错误,这个问题目前我只能通过修改nginx站点配置文件来实现。
具体代码(只看红色加粗的部分就行):
server { listen 80; server_name ……; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/……;# BEGIN 解决VUE在中间页刷新时出现404或500的问题 location / { try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录 防止404 index index.html; } location @router { rewrite ^.*$ /index.html break; } # END 解决VUE在中间页刷新时出现404或500的问题
#SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则 #error_page 404/404.html; #SSL-END #ERROR-PAGE-START 错误页配置,可以注释、删除或修改 #error_page 404 /404.html; #error_page 502 /502.html; #ERROR-PAGE-END #PHP-INFO-START PHP引用配置,可以注释或修改 include enable-php-00.conf; #PHP-INFO-END #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效 include /www/server/panel/vhost/rewrite/scope.athena.tentest.h024.cn.conf; #REWRITE-END #禁止访问的文件或目录 location ~ ^/(.user.ini|.htaccess|.git|.svn|.project|LICENSE|README.md) { return 404; } #something else……… }
以上是关于[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题的主要内容,如果未能解决你的问题,请参考以下文章
通过后台SQL获取分页数据,在使用VUE-Element-Table 表格选择多行数据时,怎样在
Vue路由history模式踩坑记录:nginx配置解决404问题