nginx|nginx vue前后端分离配置示例 nginxvue前后端分离配置示例

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_pass127.0.0.1:9000; fastcgi_indexindex.php; fastcgi_paramSCRIPT_FILENAME$document_root$fastcgi_script_name; includefastcgi_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=/$1last; 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)$ { expires12h; log_not_found off; access_logoff; } }

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)$ { expires12h; log_not_found off; access_logoff; } }