VueCLI3&ThinkPHP5共存：冲突解决指南

本文探讨了Vue-CLI 3和ThinkPHP 5混合部署时遇到的入口文件冲突和API请求路径问题，并提供了有效的解决方案。通过将Vue.js应用部署在二级目录下，避免与ThinkPHP 5入口文件冲突；同时，利用Vue CLI的proxy配置，将Vue.js应用的API请求转发到ThinkPHP 5服务，解决跨目录访问接口的问题。文章详细介绍了Apache配置和proxy配置示例，帮助开发者快速解决Vue.js和ThinkPHP 5共存部署的常见难题，实现前后端分离项目的顺利搭建。

Vue.js 和 ThinkPHP 5 混合部署的挑战

在同一个项目中同时部署 Vue CLI 3 和 ThinkPHP 5，通常会遇到入口文件冲突和 API 请求路径问题。

解决方案：

1. 解决入口文件冲突

为了避免入口文件冲突，建议将 ThinkPHP 5 的入口文件保留在项目根目录，而 Vue.js 应用则部署在二级目录下。 例如，ThinkPHP 5 的入口文件位于 index.php，Vue.js 应用则位于 vue-app 目录下。

Apache 配置示例（需根据实际路径调整）：

    ServerName www.vuetp.com
    ServerAlias vuetp.com
    DocumentRoot "d:/phpweb/phptutorial/www/vuethinkphp"  
    
        Options FollowSymLinks ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    

2. 解决 API 请求路径问题

在 Vue.js 应用中，使用相对路径请求 ThinkPHP 5 的 API 接口，并利用 Vue CLI 的 proxy 配置将请求转发到 ThinkPHP 5 服务。 proxy 配置示例：

module.exports = {
  // ... other configurations
  devServer: {
    proxy: {
      '/api': { //  匹配所有 '/api' 开头的请求
        target: 'http://www.vuetp.com/', // ThinkPHP 5 应用的地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //  将 '/api' 重写为空，确保请求路径正确
        }
      }
    }
  }
  // ... other configurations
}

通过以上配置，即使 Vue.js 应用部署在二级目录下，也能正确地访问 ThinkPHP 5 的 API 接口。 确保你的 API 接口路径在 ThinkPHP 5 中正确配置。

本篇关于《VueCLI3&ThinkPHP5共存：冲突解决指南》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！