对于这个问题,我们只需在服务器配置相关设置即可

这里使用的 nginx 服务器

第一种方案

这种方法不安全,容易被劫持
location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        error_page 404 /index.html;
}

第二种方法

    location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

第三种方法

( Vue.js 官方教程里提到的 https://router.vuejs.org/zh-cn/essentials/history-mode.html
  server {
        listen       8888;#默认端口是80,如果端口没被占用可以不用修改
        server_name  localhost;
        root         /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;
        }
        #.......其他部分省略
  }
Last modification:June 3rd, 2021 at 04:19 pm
如果觉得我的文章对你有用,请随意赞赏