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