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