Vue-CLI3和ThinkPHP5共存部署：如何解决入口文件冲突和接口请求路径问题？-php教程-PHP中文网

Vue-CLI3和ThinkPHP5共存部署：如何解决入口文件冲突和接口请求路径问题？

花韻仙語

发布： 2025-02-22 23:44:19

原创

730人浏览过

vue-cli3和thinkphp5共存部署：如何解决入口文件冲突和接口请求路径问题？

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

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

解决方案：

1. 解决入口文件冲突

立即学习“PHP免费学习笔记（深入）”；

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

Text-To-Pokemon口袋妖怪

输入文本生成自己的Pokemon，还有各种选项来定制自己的口袋妖怪

查看详情

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 中正确配置。

以上就是Vue-CLI3和ThinkPHP5共存部署：如何解决入口文件冲突和接口请求路径问题？的详细内容，更多请关注php中文网其它相关文章！