一. 实现目的
假如域名为 www.domain.com,则访问效果为:
前端地址: http://www.domain.com
接口地址: http://www.domain.com/api
管理后台: http://www.domain.com/admin
其中前端地址访问的,就是Vue项目。前后端均在同一域名,同一端口下访问,不需要做nginx转发。
二. 实现方法
1. thinkphp项目正常部署,tp5或者tp6都行。
2. 将vue打包后生成dist文件夹,将dist复制粘贴到thinkphp的public目录下。目录结构应如下:
public
|--dist
|--index.php
3. 设置Nginx的伪静态,具体的请根据您的项目自行设定。在这里示例的thinkphp项目中有两个应用(模块),Api和Admin,设置大概如下:
// 如果是访问admin的,则由thinkphp处理
location /admin {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
}
// 如果是访问api的,则由thinkphp处理
location /api {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
}
// 其他的由vue处理,并重新设置根目录为public下的dist,优先访问index.html
location / {
root /project_root/public/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
4. 重启nginx,设置结束。
三. 后面的话,为什么需要这么做
以下为我自己这么做的原因,和设置已经没关系了,可以不用看。
现在新的前后端分离的项目,vue项目和thinkphp大部分都会进行分开部署。
但是我这个是传统的thinkphp渲染模板改前后端分离。也就是之前访问前台,用的是如下链接:
前端地址: http://www.domain.com/index
然后前台页面用vue3重构了,thinkphp那边加了Api模块用来提供接口,改为了前后端分离。
其实项目还是可以分开部署的,vue部署在www.domain.com下,api部署在其他域名或者其他端口下,但是进后台的地址就会和之前不一样。
本着怀旧原则,最终还是决定部署在一起,用同一个域名访问,且使用起来和之前一模一样。