安装步骤

1、下载Nginx

下载地址：http://nginx.org/en/download.html （Nginx官网）

2、下载之后，解压到指定的目录，就可以看到以下的目录

一定不能在中文路径下的 否侧不能运行

 

3、控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。

 

 

4、nginx命令介绍

（1）start nginx 开启nginx服务

（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息

（3）nginx.exe -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息

(4) nginx.exe -s reload 重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
(5) 使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

 

访问自己的项目

hash模式

打包

npm run build

浏览器访问：localhost/dist/index.html就可以看到页面了。

当你使用 history 模式时，url就像正常的url，例如
“http://yoursite.com/mapp/”，不过这种模式还需要后台配置支持。因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器直接访问 "http://yoursite.com/mapp/home"就会返回 404。

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

子目录部署

若项目没有直接部署在Nginx主目录下,而是在其子目录，如：
Nginx配置root路径为:/usr/local/nginx/html，子目录路径为：/usr/local/nginx/html/dist,此时Nginx应该这样配置:

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

Nginx 转发时Header中信息丢失

通过Nginx转发后, Header中access_token信息丢失，经查，发现Nginx在转发时，header中带下划线_的属性默认不转发，需要增加配置：

underscores_in_headers on;

如下所示

location / {
root   html/dist/;
try_files $uri $uri/ /dist/index.html;  
index index.html;
        }