nginx.conf里要加上对laravel的静态文件目录的转发(这里假设我的静态文件在public/static下)、修改vue的nginx配置。
我们以在我本地的开发环境为例,windows7+nginx+Vue+Laravel5,假设我想使用的域名是。
想达成的效果:我们想直接访问时使用Vue开发的单页面应用index.html,做为我们的前台交互,且在Vue中使用history路由模式。后台和接口使用laravel框架进行开发,所以想使用/admin 来访问后台管理,接口交互想使用/api/xxx。
第一步,本地解析hosts,指向到127.0.0.1 。。。。
第二步,配置nginx的主server,它用来接受我们的所有请求,并进行代理转发。
server {
listen 80;
server_name ;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8181;
}
location ~ ^/(admin|api|static) {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8282;
}
}
第三步,配置Vue的server,这里假设我的Vue项目build在D:/wwwroot/myvueproject/dist目录。此server的作用是,把从主server 8181 QQ代理过来的请求全部rewrite到index.html,以支持Vue的history模式路由。
server {
listen 8181;
root "D:/wwwroot/myvueproject/dist";
index index.html;
server_name localhost;
location / {
try_files $uri $uri/ /index.html =404;
}
}
第四步,配置Laravel的server,假设laravel项目在D:/wwwroot/mylaravelproject/。此server的作用是,把从主server 8282代理来的请求(以/admin或/api开头),全部rewrite到public的index.php,实现laravel的路由系统。
server {
listen 8282;
server_name localhost;
root "D:/wwwroot/mylaravelproject/public";
index index.php;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php(.*)$ {
fastcgi_pass 127.0.0.1:9001;
fastcgi_index index.php;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
include fastcgi_params;
}
}
第五步,重启Nginx,完成!
可能遇到的问题:暂无。。。