nginx vue前后端分离配置示例

vue + thinkphp

vue为history路由模式,固定/api,/static前缀为php使用
nginx">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前后端分离配置示例 的全部内容, 来源链接: utcz.com/z/267758.html

回到顶部