PHP后端和VUE前端部署在一个域名上的一种方法

通过ngxin反向代理来实现前后端共用一个域名。注意下面location /api这段。意思是只要访问以/api开头的路径，就转发给后端8080端口的网站。这样网站前台域名是http://www.xxx.com 后台接口的baseUrl应该是http://www.xxx.com/api

1、vue前端配置一份nginx配置文件web.conf

内容大约如下：

server { listen 80; root /home/ly/www/vue-dist; index index.html index.htm; server_name www.xxx.com; client_max_body_size 100m;

# 开启gzip压缩加快访问速度 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary off; gzip_disable "MSIE [1-6].";

location / {     try_files $uri $uri/ /index.html; }}

location /api {

    #使用nginx代理，直接解决了域名共享和跨域的问题     proxy_pass http://127.0.0.1:8080/; }

}

2.php后端部署在8080端口上

配置文件大约如下：

server { listen 8080; root /home/ly/www/php-back; index index.html index.htm index.php; client_max_body_size 100m;

# 开启gzip压缩加快访问速度 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary off; gzip_disable "MSIE [1-6].";

location / { try_files $uri $uri/ /index.php?s=$uri&$args; }

# 开启PHP支持 location ~ .php { include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_pass unix:/var/run/php/php7.0-fpm.sock; fastcgi_index index.php; fastcgi_split_path_info ^(. .php)(.*)$; fastcgi_param PATH_INFO $fastcgi_path_info; } }