Nginx 前端项目配置 包含二级目录和接口代理

接口代理"/>

Nginx 前端项目配置 包含二级目录和接口代理

Nginx是目前用的比较多的一个前端服务器

其优点是配置简单修改一下server就能用
并发性能比较好，具体怎么好就看这个吧
开撸

1、找到nginx （liunx系统，已安装）
whereis nginx

2、找到位置并进入
nginx: /usr/local/nginx
cd /usr/local/nginx

3、修改conf/nginx.conf（提示权限不够的前面加 sudo）
vi conf/nginx.conf

4、直接在server里面修改

`

  # 在http对象里面server {# listen后面跟上监听的端口号listen       80;server_name  localhost;# 这个是 根路径下的配置 （下面的@router跟他是一起的）（vue项目必须）location / {# 这个是文件的根路径，html/vue_demo/dist 换成你自己的文件路径# root是根路径的意思， 文件夹我是放再nginx下的html文件夹里面了root   html/vue_demo/dist;# 当前文件夹的文件格式index  index.html;、# 是vue这样项目的加上这个，避免刷新就地址错误try_files $uri $uri/ @router;}# 这个是配置的 www.xxx/admin 这样二级目录下显示另外一个项目的配置# 需要了就去掉 代码前面的 ##location /admin {# 此为新应用index,static目录，同时注意这里是alias,不是root，还有以及new的后面有/结尾# html/vue_demo/admin/ 更改为自己的文件夹路径#        alias html/vue_demo/admin/;# /admin/index.html 的admin是必须加的，区分子路径的标识#        try_files $uri $uri/ /admin/index.html;#}# 配置普通静态网站的， vue就不需要不开#location /static {#      alias html/wuyan/static/;#}#跟上上面跟路由是一起的 （vue项目必须）location @router {rewrite ^.*$ /index.html last;}# 设置接口代理，适用vue项目中配置反向代理的情况，不需要不开# location /dev-api {#         add_header Access-Control-Allow-Methods *;#         add_header Access-Control-Allow-Origin $http_origin;#         add_header Access-Control-Allow-Credentials true;# 替换为自己的接口地址 .x:xxxx#         proxy_pass .x:xxxx;# }}

`

5、总结：这里面满足了基本的nginx配置（包括普通静态页面、vue这样的需要打包的项目、二级目录配置、接口代理避免跨域），
这个教程是针对前端新手的。描述的不好的可以提，积极改正，重新做人 sky