thinkphp6.x+vue3.2前后端分离项目

问题解读

前后端分离项目逐渐占据主流，传统意义上的前后端分离项目是将前端项目和后端项目搭建到两个域名下，或者相同域名的不同端口下。那么，怎么在用一个域名下搭建前后端分离项目呢？我们知道，thinkphp框架的访问目录是public，这是出于安全考虑的，并且thinkphp和vue都是各自的路由系统，当我们访问url时，难免会出现冲突或者其他错误。

解决方案

将前端打包后的文件放在public目录下，然后在配置相关的伪静态即可

伪静态配置

ngnix：

location /api {
rewrite ^/api(.*)$ /index.php?s=$1 last;
 }
location / {
    index index.html  index.php;
}

apache：

<IfModule dir_module> 
    DirectoryIndex index.html index.php 
</IfModule> 
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^api(.*)$ /index.php?s=$1 [QSA,PT,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

当访问/api时，交给index.php处理，并重写index.php为/api；

当访问其他时，交给index.html处理，相关404页面需要在vue中配置

index.html的访问优先级高于index.php（防止网站主页提示控制器不存在）

该伪静态配置也能防止前端页面开始正常访问，刷新后显示404的错误