nginx部署前端项目,部署vue项目,配置步骤,配置二级目录,访问本地静态资源
第一步:下载nginx,
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 则对 ”/” 可有可无。
更多推荐
所有评论(0)