clas vue try_files doc set php rip ati
问题描述:
前端使用vue-cli开发单页路由项目,放到nginx上访问的时候,刷新会出现404现象
服务端一开始的配置如下:
- server {
- listen 80;
- server_name localhost;
- #charset koi8-r;
- #access_log logs/host.access.log main;
- location / {
- root html;
- index index.html index.htm;
- }
- #error_page 404 /404.html;
- # redirect server error pages to the static page /50x.html
- #
- error_page 500 502 503 504 /50x.html;
- location = /50x.html {
- root html;
- }
- # proxy the PHP scripts to Apache listening on 127.0.0.1:80
- #
- #location ~ \.php$ {
- # proxy_pass http://127.0.0.1;
- #}
- # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
- #
- #location ~ \.php$ {
- # root html;
- # fastcgi_pass 127.0.0.1:9000;
- # fastcgi_index index.php;
- # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
- # include fastcgi_params;
- #}
- # deny access to .htaccess files, if Apache‘s document root
- # concurs with nginx‘s one
- #
- #location ~ /\.ht {
- # deny all;
- #}
- }
解决方法:
在nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下:
- server {
- listen 80;
- server_name localhost;
- #charset koi8-r;
- #access_log logs/host.access.log main;
- root C:\Users\vicky\Documents\primary\i-link-request\dist;
- index index.html index.htm;
- location / {
- try_files $uri $uri/ @router;
- index index.html;
- }
- location @router {
- rewrite ^.*$ /index.html last;
- }
- #error_page 404 /404.html;
- # redirect server error pages to the static page /50x.html
- #
- error_page 500 502 503 504 /50x.html;
- location = /50x.html {
- root html;
- }
- # proxy the PHP scripts to Apache listening on 127.0.0.1:80
- #
- #location ~ \.php$ {
- # proxy_pass http://127.0.0.1;
- #}
- # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
- #
- #location ~ \.php$ {
- # root html;
- # fastcgi_pass 127.0.0.1:9000;
- # fastcgi_index index.php;
- # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
- # include fastcgi_params;
- #}
- # deny access to .htaccess files, if Apache‘s document root
- # concurs with nginx‘s one
- #
- #location ~ /\.ht {
- # deny all;
- #}
- }
修改的主要配置为:
- location / {
- try_files $uri $uri / @router;
- index index.html;
- }
- location@router {
- rewrite ^ . * $ / index.html last;
- }
重启nginx 之后就可以正常访问了
vue-route+webpack部署单页路由项目,访问刷新出现404问题
来源: http://www.bubuko.com/infodetail-2305336.html