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共存部署：如何解决入口文件冲突和接口请求路径问题？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1253297.html
微信扫一扫 
支付宝扫一扫 
