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 配置示例（需根据实际路径调整）：
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 中正确配置。
以上就是Vue-CLI3和ThinkPHP5共存部署：如何解决入口文件冲突和接口请求路径问题？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2498307.html
