Vue.js 和 ThinkPHP 5 混合部署的挑战
在同一个项目中同时部署 Vue CLI 3 和 ThinkPHP 5，通常会遇到入口文件冲突和 API 请求路径问题。
解决方案：
1. 解决入口文件冲突
立即学习“PHP免费学习笔记（深入）”；
为了避免入口文件冲突，建议将 ThinkPHP 5 的入口文件保留在项目根目录，而 Vue.js 应用则部署在二级目录下。 例如，ThinkPHP 5 的入口文件位于 index.php，Vue.js 应用则位于 vue-app 目录下。
Apache 配置示例（需根据实际路径调整）：
<code class="apache"><VirtualHost *:80>
ServerName www.vuetp.com
ServerAlias vuetp.com
DocumentRoot "d:/phpweb/phptutorial/www/vuethinkphp"
<Directory "d:/phpweb/phptutorial/www/vuethinkphp">
Options FollowSymLinks ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost></code>
2. 解决 API 请求路径问题
在 Vue.js 应用中，使用相对路径请求 ThinkPHP 5 的 API 接口，并利用 Vue CLI 的 proxy 配置将请求转发到 ThinkPHP 5 服务。 proxy 配置示例：
<code class="javascript">module.exports = {
// ... other configurations
devServer: {
proxy: {
'/api': { // 匹配所有 '/api' 开头的请求
target: 'http://www.vuetp.com/', // ThinkPHP 5 应用的地址
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/' // 将 '/api' 重写为空，确保请求路径正确
}
}
}
}
// ... other configurations
}</code>
通过以上配置，即使 Vue.js 应用部署在二级目录下，也能正确地访问 ThinkPHP 5 的 API 接口。 确保你的 API 接口路径在 ThinkPHP 5 中正确配置。
