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 则对 ”/” 可有可无。

 

 

 

Logo

前往低代码交流专区

更多推荐