nginx实用配置&vueRouter history模式

download下来，解压到e:/盘，修改配置文件,E:\nginx\conf下的nginx.conf文件

常用命令

在安装目录下，打开cmd命令行 （别的命令行工具不行）

start nginx  //启动nginx
nginx -s stop  //关闭
nginx  -s reload  //更改配置文件后，用这个命令重启nginx

切勿重复点击nginx.exe启动 容易出现错误，反复修改配置文件报500，试着重装nginx试试

修改配置文件，启动静态服务，这里我是在 E:\somepage\dist目录下放了一个spa应用，配置完启动正常

如果要自定义域名，需要修改host文件映射

http {


    server {
        listen       80;      //监听的端口
        server_name  localhost;  //启动的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {   // 根路由代理的目录，这里是 E:\somepage\dist目录，默认打开index.html文件
            root   E:\somepage\dist;
            index  index.html index.htm;
        }
    }

server{
            listen       8000; //修改端口为8000打开页面
        server_name  localhost;
        
        location / {
            root   html;
            index  index.html index.htm;
        }
}


}

一次500报错 ,下面配置启动ng会报错500

    server {
        listen       8000;
        server_name  localhost;

                location / {
                root  E:\ngProject\vueDemo;
                index  index.html index.htm;
            }
    }

查看error.log （在logs目录下）

2019/07/02 09:58:31 [crit] 128#7016: *58 CreateFile() "E:
gProject\vueDemo/favicon.ico" failed (123: The filename, directory name, or volume label syntax is incorrect), client: 127.0.0.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", host: "localhost:8000", referrer: "http://localhost:8000/vueDemo/"

解决 ：查看日志发现是路径有问题，E:后面有一个换行符，猜测是\n被当成了换行符 ，修改root： root E:\\ngProject\vueDemo;

nginx重定向的2种方式，

    server {
        listen       8000;
        server_name  localhost;
                #server级别的 root配置 ，相当于配置了兜底的location / {...} 
                root  E:\\ngProject\vueDemo;
                index  index.html index.htm;
                location /proxy1/ {
                #  proxy_pass 指令后面跟上url代理转发
                  proxy_pass  http://www.baidu.com/;
            }
            

                location /proxy2/ {
                #rewrite 是实现URL重定向的重要指令，语法： rewrite regex replacement[flag];
                  rewrite ^/(.*) http://www.baidu.com permanent;  
            }

    }

proxy_pass 指令注意点：后面跟的url 末尾带/和不带/是有区别的

例如：nginx请求链接：http://localhost:8000/api/getName?name=xiaoming

a.第一种情况：proxy_pass链接的最后不带"/"

    server {
        listen       8000;
        server_name  localhost;
                location ^~ /api/ {
                  proxy_pass  http://localhost:8082;
            }
    }

代理结果:http://localhost:8082/api/getName?name=xiaoming

b.第二种情况：proxy_pass链接的最后带"/"

    server {
        listen       8000;
        server_name  localhost;
                location ^~ /api/ {
                  proxy_pass  http://localhost:8082/;
            }
    }

代理结果:http://localhost:8082/getName?name=xiaoming

root 和alias指令的区别 ：

root的处理结果是：root路径＋location路径 ;alias的处理结果是：使用alias路径替换location路径

root 实例：

location ^~ /t/ {
     root /www/root/html/;
}

如果一个请求的URI是/t/a.html时，web服务器将会返回服务器上的/www/root/html/t/a.html的文件。

alias实例：

location ^~ /t/ {
 alias /www/root/html/new_t/;
}

如果一个请求的URI是/t/a.html时，web服务器将会返回服务器上的/www/root/html/new_t/a.html的文件。注意这里是new_t，因为alias会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。

注意：

1. 使用alias时，目录名后面一定要加"/"。
2. alias在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用。
3. alias只能位于location块中。（root可以不放在location中）

vue history模式ngxin配置：

        #     vue history模式,代码在目录html/dist里， nginx后台配置：
        #  访问： url http://localhost/{routerPath}
            location / {
                root   html/dist;
                index  index.html index.htm;
#这里会根据匹配的路劲去找文件，找不到的时候，会返回html/dist/index.html文件，
#  vueRouter会根据{routerPath}展示对应的路由页面
                try_files $uri $uri/ /index.html;  
                }                                                
# 访问： url http://localhost/dist/{routerPath} ，同时vue打包配置需更改pubilcPath:'/dist'，
#这样项目里面的资源都会被转发到这里
#注意：：：还需要 修改router配置为：{path:/dist ,children:[]}，路由全部挂到/dist下， '/'根路由重定向到/dist
            location ^~ /dist {
                alias   html/dist/;
                index   index.html index.htm;
                try_files $uri $uri/ /dist/index.html; #注意这里是 /dist/index.html
            }