ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

nginx vue前后端分离配置示例

2022-03-02 14:34:23  阅读:243  来源: 互联网

标签:index vue 示例 header nginx location php root fastcgi


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;
  }
}

标签:index,vue,示例,header,nginx,location,php,root,fastcgi
来源: https://www.cnblogs.com/aichenk/p/15954937.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有