Sivo 悉见

解决Angular项目部署到服务器后,路由失效导致404错误的问题

匿名 · 更新于 2017/9/29

Nginx服务器的网站配置文件中加入如下加粗部分代码即可
server {
        listen       80;
        server_name  myapp;
        root   "F:/www/project-name"; 

        location / {
            index  index.html index.htm index.php;
            try_files $uri $uri/ /index.html;  //Angular项目位于根目录下   项目实际位置:F:/www/project-name
            try_files $uri $uri/ /my/app/index.html;   //Angular项目位于子目录下 注意要把子目录加上    项目实际位置:F:/www/project-name/my/app

            #autoindex  on;
        }
        location ~ .php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
}

同时要注意如果Angular项目位于子目录下,需要修改Angular项目src目录下的index.html中的<base href="/">为<base href="/my/app/">

造成这个问题的原因:http://www.edbiji.com/doccenter/showdoc/205/nav/3208.html