标题# Windows下nginx部署vue配置（小白版）
一、安装nginx
1.安装
选择nginx安装包直接解压即可（这个很简单，就不多做演示了）
2.测试启动
简单命令：
启动命令： start nginx
停止命令：nginx.exe -s stop
修改配置文件后，需要重新加载配置文件内容时，无需停止，输入以下命令即可：nginx.exe -s reload
nginx默认端口为80，直接在浏览器地址栏输入网址http://localhost:80，回车，出现以下页面说明启动成功
也可以在cmd命令窗口输入命令
tasklist /fi “imagename eq nginx.exe” ，出现如下结果说明启动成功
二、修改配置文件
1.测试端口
nginx的配置文件是conf目录下的nginx.conf，默认配置的nginx监听的端口为80，如果80端口被占用可以修改为未被占用的端口即可.
如下图为本人在配置时改的一些配置
2.基本参数解释
下列参数是我在配置时查询资料后得出的一些结果，我觉得搞懂这些参数很重要
（1）Listen：监听本机的端口 默认80 ，可修改
（2）server_name：
监听本机的ip
（3）root：访问项目的根目录（绝对路径）
（4）Location /test/ :拦截请求中所有带有“/test/ ”的请求，并将该请求转发至代理后的地址
location /static/ {
rewrite ^ http://www.abc.com ;
}
#上面实现的功能：假设网站域名为www.blog.com；那么配置上面的功能是输入www.blog.com/static/时，不管static后面是什么页面（页面也可以不存在），那么最终会同样跳转到www.abc.com这个网站。
（5）proxy_pass（代理后的地址）: http://111.99.89.7:8087/$request_url;
（6）$request_url：nginx中参数 代表原请求中的请求;
比如http://www.baidu.com/pan/beta/test1?fid=3这个url，去掉www.baidu.com剩下的就是了，“/pan/beta/test1?fid=3”
以下链接为nginx中常用变量的说明，大家有需要可以参考下()
（7）rewrite:rewrite是Nginx服务器提供的一个重要的功能，它可以实现URL重定向功能。
基本语法rewrite
regex replacement [flag];
rewrite的含义：该指令是实现URL重写的指令。
regex的含义：用于匹配URI的正则表达式。
replacement：将regex正则匹配到的内容替换成 replacement。
flag: flag标记。
例：rewrite ^/(.*)
http://www.baidu.com/$1 permanent;
说明：
rewrite： 为固定关键字，表示开始进行rewrite匹配规则。
regex： 为 ^/(.*)。 这是一个正则表达式，匹配完整的域名和后面的路径地址。
replacement：就是
http://www.baidu.com/1这块了，其中1这块了，其中1是取regex部分()里面的内容。如果匹配成功后跳转到的URL。
Flag： 就是 permanent，代表永久重定向的含义，即跳转到 http://www.baidu.com/$1 地址上。
三、部署流程
1. 打包vue
将开发好的vue项目打包后，将dist文件夹放在本地某个文件夹下，例如我将dist文件夹放在了本地后的地址为D:\work\dist;
2. 修改配置文件
首先增加以下配置：
（1）root
D::work\dist;该配置为确定mginx访问项目的根目录
（2）
location /test/{
Index index.html
proxy_pass htttp://111.99.89.7:8087/$request_uri;
}Index 代表指定的项目首页
proxy_pass 代表代理后的地址 其具体含义为将符合location匹配规则的请求中，除去请求中到端口号的ip，将剩余的uri与代理中的拼接后，重新请求。
例：
原请求：http://111.99.99.1:8080/test/getAllEnv
代理后的请求：http://111.99.89.7:8089/test/getAllEnv
注：location 的匹配顺序其实是“先匹配普通，再匹配正则”
（3）location / {
try_files $uri $uri/ @router;
}location @router {
rewrite ^.*$ /index.html last;
}若/baseEnv无法匹配到的时候，则会到 / 匹配中依次去
uri/ 和 location @router 中寻找到对应的资源
例：
location /images/ {root /opt/html/;try_files $uri $uri/ /images/default.gif;
}比如 请求 127.0.0.1/images/test.gif 会依次查找 1.文件/opt/html/images/test.gif 2.文件夹 /opt/html/images/test.gif/下的index文件 3. 请求127.0.0.1/images/default.gif
