一. 实现目的

假如域名为  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部署在其他域名或者其他端口下，但是进后台的地址就会和之前不一样。

本着怀旧原则，最终还是决定部署在一起，用同一个域名访问，且使用起来和之前一模一样。