Vue.js和ThinkPHP5在同一域名下的部署策略
在Vue.js和ThinkPHP5框架的项目部署中，通常建议将前后端分离部署在不同的域名或服务器上，通过API进行通信。然而，某些场景下，将两者部署在同一域名下是必要的。本文将探讨如何在同一域名下部署Vue.js和ThinkPHP5，并解决入口文件和请求路径的冲突问题。
入口文件配置
两种主要的入口文件配置方法：
立即学习“前端免费学习笔记（深入）”；
方法一：Vue.js作为根目录
- 将域名根目录指向Vue.js项目的
dist目录。 - 将ThinkPHP5项目代码放置在Vue.js项目的根目录下（需要对ThinkPHP5代码进行相应调整，例如调整入口文件和路由配置）。
方法二：ThinkPHP5作为根目录
- 将域名根目录指向ThinkPHP5的
public目录。 - 将Vue.js打包后的
dist目录放置在ThinkPHP5的public目录下。
请求路径处理
当Vue.js项目部署在ThinkPHP5的public目录下时，需要特别处理Vue.js发出的API请求路径。
-
开发环境：在
vue.config.js中配置proxy对象，将Vue.js的请求代理到ThinkPHP5的IP地址或域名。 -
生产环境：生产环境与开发环境不同，Vue.js发出的请求会先到达ThinkPHP5的
public目录，而不是ThinkPHP5的根目录。因此，需要修改proxy对象的路径重写规则，将请求重写到正确的ThinkPHP5路由。
示例：
假设ThinkPHP5的API路由为/api/test，则：
开发环境vue.config.js配置：
proxy: {
'/api': {
target: 'http://www.your-tp5-domain.com', // 替换为你的ThinkPHP5域名或IP
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
生产环境vue.config.js配置（Vue.js部署在ThinkPHP5的public目录下）：
proxy: {
'/api': {
target: 'http://www.your-tp5-domain.com', // 替换为你的ThinkPHP5域名或IP
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/api' // 注意：这里不需要修改为`/public/api`，因为proxy已经处理了请求路径
}
}
}
通过合理配置入口文件和请求路径，可以成功地在同一域名下部署Vue.js和ThinkPHP5项目，实现前后端正常通信。 需要注意的是，选择哪种方法取决于项目的具体结构和需求，以及对ThinkPHP5代码的修改程度。 建议在生产环境中仔细测试API请求路径的正确性。
