vue.js - vue-router开启HTML5的history模式后nginx配置

问题描述

问 题

因为在eagle201510项目下面有很多子项目，尝试了多种配置方法都不能共存

我希望是这样的：

server {
        listen       80;
        server_name  192.168.10.91;
        root   "E:/UED/eagle/branch/eagle201510";
        location / {
            index  index.html index.htm index.php;
            #autoindex  on;
        }
        location ^~ /m-example/ {
            root   "E:/UED/eagle/branch/eagle201510/m-example";
            try_files $uri $uri/ /index.html =404;
        }
        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;
        }
}

m-example目录是使用vue-router开发的单页应用，需要单独配置，但这种方式m-example并不能正常加载
加载的js，css都变成了html
console

vendors.js:1 Uncaught SyntaxError: Unexpected token <
main.js:1 Uncaught SyntaxError: Unexpected token <
index.html:6 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://192.168.10.91/m-example/dist/main.css".

如果配置改成这样：

server {
        listen       80;
        server_name  192.168.10.91;
        root   "E:/UED/eagle/branch/eagle201510";
        location / {
            root   "E:/UED/eagle/branch/eagle201510/m-example";
            try_files $uri $uri/ /index.html =404;
        }
        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;
        }
}

就正常了。但是其它项目又无法访问了。。。

解决方案

添加一个server配置项解决，如下：

server {
        listen       80;
        server_name  www.m-example.com;
        root   "E:/UED/eagle/branch/eagle201510/m-example";
        location / {
            try_files $uri $uri/ /index.html =404;
        }
}

这篇关于vue.js - vue-router开启HTML5的history模式后nginx配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！