Vue和TP5同域名部署：如何处理入口文件和请求路径？

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请求路径的正确性。