nginx vue前后端分离配置示例

本文主要是介绍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;
  }
}

这篇关于nginx vue前后端分离配置示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！