nginx部署前端项目，部署vue项目，配置步骤，配置二级目录，访问本地静态资源

ngnix怎么运行起来前端项目呢？比如：vue项目，下面就让我开始看看步骤吧，五步即可。

第一步：

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

第二步，解压到一个英文目录文件夹下，中文有时候会出问题。 

打开conf文件夹里面的nginx.conf文件，

 

第三步：打开配置文件：进行修改配置

主要看下面标红的地方就行，

 

 

第四步：把静态资源放入指定的文件夹，我是放在了D盘

 

第五步：开始修改配置

需要跨域的话，可以加上跨域配置：

 

#配置跨域

        add_header Access-Control-Allow-Origin *;

        add_header Access-Control-Allow-Headers X-Requested-With;

        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

 

如图：

 

启动nginx即可，双击ngnix.exe即可，启动成功后，会在任务管理器里面出现。

 

最后：访问的页面地址：http://localhost:80/

 

重点：如何配置二级目录

如：http://localhost/zqc/#/      多了一个zqc,

直接在配置文件里增加一个location即可：

 

root和alias的区别：

nginx指定文件路径有两种方式root和alias，指令的使用方法和作用域：
[root]
语法：root path
默认值：root html
配置段：http、server、location、if
[alias]
语法：alias path
配置段：location

root与alias主要区别在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
root的处理结果是：root路径＋location路径
alias的处理结果是：使用alias路径替换location路径

alias指定的路径是location的别名，不管location的值怎么写，资源的 真实路径都是 alias 指定的路径 

alias 后面必须要用 “/” 结束，否则会找不到文件，而 root 则对 ”/” 可有可无。