[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题

摘要:
该应用程序是一个VUE单页应用程序,路由模式为历史,web服务器为nginx。通常,如果您通过url直接访问中间页面,就会看到nginx返回的404错误。目前,我只能通过修改nginx站点配置文件来实现这个问题。特定代码:服务器{listen80;服务器名称

    应用为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的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇display 设置为table、tablecell、tablerow052(六)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue项目性能优化整理

 以下方式基于 @vue/cli 快速搭建的交互式项目脚手架 1. 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。 1 imp...

vue中dom元素和组件的获取

Vue中获取DOM元素 <div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="myh3">今天天气真好啊</h3> </div> <...

如何在Vue中建立全局引用或者全局命令

1 一般在vue中,有很多vue组件,这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js  2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:dire...

QPS第二级削峰—流量网关+Nginx+lua+Redis+模板引擎

  LVS+Nginx动静分离 上文聊到,对用户入口流量的第一级控制,其实就是DNS智能解析,搭配一个负载均衡器LVS或Nginx,配合Keepalived做到入口高可用,代理或转发请求到Nginx节点,做负载均衡,并从Nginx节点上获取  html资源。 但此时需要思考一个问题? 在html上请求到的都是静态资源,即页面上不变的资源,而动态需要变化的...

查找nginx安装的路径

 转 http://joowhee.com/nginx-an-zhuang-di-lu-jing/ 你可以用这两个命令,找安装启用的路径 netstat -tnlp|grep nginx 然后看到一行记录,复制最后的一个数据(进程ID) ps -aux |grep 进程ID 就可以看到 NINGX的启动方式了。 如果你现在不知道,并且没重动NIGNX,则可...

vue 进入页面与离开页面触发事件

1.切换进入当前路由之前的钩子函数 beforeRouteEnter <script> export default { beforeRouteEnter(to, form, next) { next() } } </script> 2.离开当前路由之前的钩子函数 beforeRouteLeave <scri...