vue-router history模式下刷新404问题

5,839 阅读1分钟

第一种情况:

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口

vue中配置保持不变
nginx中配置如下:

server {
        listen      9091;
        server_name localhost;
        root   C:\Users\Administrator\Desktop\ftp_files\dist;
        index  index.html;
        location / {
	       try_files $uri $uri/ /index.html;
        }
    }


第二种情况:项目的入口文件在服务器访问地址的子目录下,或项目和其他项目放在同一个端口下面并且几个项目在同一目录下

vue中配置:
      1. router中的配置:

      2. config/index.js中的配置

nginx中配置:

其中location的路由/history和vue-router中路由的base要一致,
项目所在文件夹的名称为history,和location要一致

server {
    listen 443 ssl;
    server_name xxx.com;  # localhost修改为您证书绑定的域名。
    
    root C:\Users\Administrator\Desktop\demos;
    index index.html index.htm;
    
    location / {
    }

    location /history {
        try_files $uri $uri/ /history/index.html;
    }
}

最终访问地址:xxx.com/history