关于devops:nginx-vue前后端分离配置示例

vue + thinkphp

vue 为 history 路由模式，固定 /api，/static 前缀为 php 应用

server {
  listen 80;
  server_name localhost;

  set $static_root '';    # web 目录
  set $php_root '';    # php 目录
  root $static_root;

  index index.html index.htm index.php;

  location ~ \.php$ {
      root $php_root;
      fastcgi_pass   127.0.0.1:9000;
      fastcgi_index  index.php;
      fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
      include        fastcgi_params;
      fastcgi_buffer_size 128k;
      fastcgi_buffers 32 32k;
      fastcgi_connect_timeout 300;
      fastcgi_send_timeout 300;
      fastcgi_read_timeout 300;
  }

  location / {try_files $uri $uri/ /index.html;}
  
  location ^~ /api/ {
      root $php_root;
      if (!-e $request_filename) {rewrite  ^(.*)$  /index.php?s=/$1  last;
          break;
      }
  }

  location ^~ /static/ {
      root $php_root;
      access_log off;
  }

  # 首页不缓存
  location = /index.html {
      add_header Cache-Control no-cache;
      add_header Pragma no-cache;
      add_header Expires 0;
  }

  location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
      expires       12h;
      log_not_found off;
      access_log    off;
  }
}

vue + 端口转发

二级目录可应用此办法

server {
  listen 80;
  server_name localhost;
  root '';
  index index.html index.htm;

  location ^~ /api/ {
    proxy_set_header HOST $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://localhost:8080;
    # proxy_pass http://localhost:8080/; #转发时想去除 /api 前缀可应用这条
  }

  location / {try_files $uri $uri/ /index.html;}

  # 首页不缓存
  location = /index.html {
      add_header Cache-Control no-cache;
      add_header Pragma no-cache;
      add_header Expires 0;
  }

  location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
      expires       12h;
      log_not_found off;
      access_log    off;
  }
}