记录一下关于nginx 如何配置vue + webpack 的打包后的静态资源

众所周知：当前通过npm run build 后会产生一个dist 文件夹

那么如何放到服务器上然后通过一系列的转发呢：

安装nginx  我在这里不多介绍，随便搜一篇博客安装就行。

主要介绍nginx.conf 的配置文件内容：

配置文件中可以配置多个server

server {
      gzip  on;
      gzip_min_length 1024;
      gzip_comp_level 6;
      gzip_proxied any;
      gzip_types text/plain text/css image/jpeg image/gif image/png application/octet-stream application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-font-woff;
    listen  3028;  # 配置端口号。直接访问111.111.111.111:3028 这个地址就能访问项目的 首页了
    server_name 111.111.111.111;  #这里配置当前服务器的地址111.111.111.111,地址是我随便写的，记得换成自己的。

   location / {
      root  /data/adaSpace/dist/; # 这里配置我们放置的静态资源也就是dist的路径，我把dist文件夹放在根目录下的data/adaSpace文件夹下
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    location ^~ /api/ { # 一般接口都是api 开头的，所以这里配置凡是遇到api开头的转发到下面的222.222.222.222:8090地址
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass http://222.222.222.222:8090/; # 转发地址222.222.222.222:8090，也是我随便写的，到时候换成自己想要转发的后端接口地址加端口号，这里是nginx做跨域转发用的
    }
  }

着重说一下，一般来说，后端接口给的地址都是api 开头的，但是我们这不是，不过我自己在前端配置接口的时候，自己加了个api,那么意味着 ，我在转发的时候就要把api去掉，那怎么去掉呢，很简单。 proxy_pass http://222.222.222.222:8090/，看到8090后面的  / 了吗，加上就是去掉api,例如 我前端请求的是111.111.111.111:8080/api/a/b/c,那么在加 / 的情况下，就会转发到222.222.222.222:8090/a/b/c。若不加/ ，则请求222.222.222.222:8090/api/a/b/c

 

当前上面的配置 还有一些gizp 的优化，开启gzip ,页面简直能飞起来了，gzip_types  里面配置需要压缩的类型，加入你不知道请求的是什么类型，该怎么配置 ，那么看这里。

如图，我开始不知道.gltf 是什么类型，导致我刚开始请求需要3.7M ,然后找到这个类型，在gzip_types配置一下，压缩到900多K,神奇。还有一点如图，看是否开启了gzip 压缩  ，看Content-Encoding  是否是gzip。