Nginx配置-vue项目打包部署篇

一、打包配置部署相关说明

将部署应用程序包的基本 URL（baseUrl在 Vue CLI 3.3 之前的叫法）。这相当于 webpack 的output.publicPath，但是 Vue CLI 也需要这个值用于其他目的，所以你应该总是使用publicPath而不是修改 webpackoutput.publicPath。

默认情况下，Vue CLI 假设您的应用程序将部署在域的根目录下，例如www.my-app.com/. 如果您的应用程序部署在子路径中，您将需要使用此选项指定该子路径。例如，如果您的应用程序部署在www.foobar.com/my-app/，则设置…

该值还可以设置为空字符串 ( '') 或相对路径 ( ./)，以便使用相对路径链接所有资产。这允许构建的包部署在任何公共路径下，或在基于文件系统的环境中使用，如 Cordova 混合应用程序。

（history路由模式， publicPath，不宜设置为空字符串 ( '') 或相对路径 ( ./)，因为这会导致在多级路由的情况下，刷新会出现获取不到资源的情况。此时应该遵循根路径部署publicPath设置为“/”，部署在子路径则设置为“/子路径/”）。这或许是最好的办法，有些同学通过nginx配置也可以实现，但这会有隐患，隐患在于，增加了新的多级路由，则有需要nginx多配置一套路径支持。publicPath设置为绝对路径的方式，会非常友好，即是在多级路由多种二级路由，都能正确获取。

二、nginx 中 root 和 alias 的区别

1.root和alias用法说明

root 与 alias主要区别在于nginx如何解析location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。

[root] 语法：root path 默认值：root html 配置段：http、server、location、if

[alias] 语法：alias path 配置段：location

需要注意的是：

1.alias 后面的 path 目录一定要加“/”，root 不要求；但alias和root前则不能加“/”,否则nginx会报500。

2.alias 在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用；

3.alias 的配置段仅限于 location，而root则可在http、server、location、if中。

2.root和alias配置说明与示例

举例说明：例如有一个请求 http://localhost/favicon.png，root和alias回使nginx服务器有不同的映射方式。 root时，nginx会匹配/html/subpath/favicon.png的资源。alias时，nginx会匹配/html/favicon.png的资源，会丢掉/subpath/。示例如下：

// root时，nginx会匹配/html/subpath/favicon.png的资源
location /subpath/ {
    root  html/;
    index  index.html index.htm;
}
// alias时，nginx会匹配/html/favicon.png的资源，会丢掉/subpath/
location /subpath/ {
    alias  html/;
    index  index.html index.htm;
}

3.子路径部署说明与示例

不使用publicPath而使用baseUrl的项目，例如iview-admin，在子路径部署时，应当除了按照baseUrl的值添加“/my-app/”，route的base值也需要加“/my-app/”，此时nginx部署配置如下：

location / {
    root  iview8;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

location /vue-x6 {
    alias  flow;
    try_files $uri $uri/ /vue-x6/index.html;
    index  index.html index.htm;
}

4.多个项目部署在不同子路径下说明示例

1.解决history模式下，根路径（root）部署，路由路径有级别问题的写法：

try_files $uri $uri/ @router;
location @router {
      rewrite ^.*$ /index.html last;
}

2.解决刷新404问题：try_files $uri$ uri/ /standard/index.html;

3.解决子路径部署问题：alias html/community；vue项目打包时，publicPath应设为子路径。

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    gzip  on;

    server {
      # 监听的端口号和域名
      listen       80;
      server_name  localhost;

      location / {
         # 请求头配置
         add_header Access-Control-Allow-Credentials true;
         add_header Access-Control-Allow-Origin *;
         add_header Access-Control-Allow-Methods 'POST, GET, PUT, OPTIONS, DELETE';
         add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type,                Accept, token';
      
         root   html/dist;
         try_files $uri $uri/ @router;
         index  index.html index.htm;
      }
      
      location /home {
         alias   html/dist;
         try_files $uri $uri/ /dist/index.html;
         index  index.html index.htm;
      }
      
      location /standard {
         alias   html/standard;
         try_files $uri $uri/ /standard/index.html;
         index  index.html index.htm;
      }
        
      # 这是必要的配置，因为前面用到了@router
      location @router {
         rewrite ^.*$ /index.html last;
      }
    }
}

5.nginx 转发到不同端口示例

# tomcat项目 外部访问地址：域名/
location /{   
   proxy_pass http://location:8088
}

# nginx项目  外部访问地址：域名/wx/
location /wx/{
   proxy_pass http://location:8081
}

三、nginx 过滤日志示例

补充说明：

自定义一个 log_format，标识为 main，对请求中的 uri 做匹配，如果是以 gif、jpg、css、js 等作为结尾的资源，则 $not_static 为0，否则为1。

对访问端口的请求，access_log 指定使用标识为 main 的自定义日志格式，且仅当 $not_static 为1时才记录日志。

需要注意的是，access_log 中使用 if 参数时，需要设定一个 log_format，不然会出错并提示： nginx: [emerg] unknown log format "if=$not_static"