开发者社区> 问答> 正文

vue 路由 history 模式刷新页面出现 404 问题?

vue 路由 history 模式刷新页面出现 404 问题?

展开
收起
OSC开源社区 2024-06-13 08:01:38 19 0
1 条回答
写回答
取消 提交回答
  • vue hash 模式下,URL 中存在'#',用'history' 模式就能解决这个问题。但是 history 模式会出现刷新页面后,页面出现 404。解决的办法是用 nginx 配置一下。
    在 nginx 的配置文件中修改

    方法一:

    location /{
    root /data/nginx/html;
    index index.html index.htm;
    if (!-e $request_filename) {
    rewrite ^/(.*) /index.html last;
    break;
    }
    }
    方法二:
    vue.js 官方教程里提到的

    server {
    listen 8081;#默认端口是80,如果端口没被占用可以不用修改
    server_name myapp.com;
    root D:/vue/my_app/dist;#vue项目的打包后的dist
    location / {
    try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
    index index.html index.htm;
    }

        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
    

    }

    2024-06-13 17:49:40
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
Vue.js在前端服务化上的实践与探索 立即下载
低代码开发师(初级)实战教程 立即下载