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.com/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;
              # 替换为自己的接口地址 http://xxxx.xx.xx.x:xxxx
    #         proxy_pass http://xxxx.xx.xx.x:xxxx;
    # }
  }

`

5、总结：这里面满足了基本的nginx配置（包括普通静态页面、vue这样的需要打包的项目、二级目录配置、接口代理避免跨域），

这个教程是针对前端新手的。描述的不好的可以提，积极改正，重新做人 sky