Vue与ThinkPHP6共存部署指南
作者:WarmHope
时间:2025-06-25
浏览:0
同域名下部署Vue+ThinkPHP6指南以下步骤将指导你在一个域名下部署Vue+ThinkPHP6应用程序:1.前端配置对于...

单域名部署 Vue.js 和 ThinkPHP6 实践指南
本指南详细介绍如何在同一个域名下成功部署 Vue.js 前端应用和 ThinkPHP6 后端框架。
前端配置 (Vue.js)
使用 history 模式时,需要修改 vue.config.js 文件,指定正确的公共路径:
module.exports = {
publicPath: '/subdirectory/' // 将 subdirectory 替换为你的子目录名
};
前端部署
将 Vue.js 应用构建后的 dist 文件夹放置到 ThinkPHP6 项目的 public 目录下的 subdirectory 子目录中(与 vue.config.js 中的配置保持一致)。
后端路由 (ThinkPHP6)
ThinkPHP6 需要配置路由,确保所有非 API 请求都转发到 Vue.js 应用。 这可以通过在路由文件中添加规则来实现,例如,将所有未匹配的请求重定向到 /subdirectory/index.html。 具体实现方法取决于你的路由配置方式。
伪静态规则 (Nginx 或 Apache)
为了实现根域名访问,你需要配置伪静态规则。以下是一个 Nginx 的示例:
location / {
try_files $uri $uri/ /subdirectory/index.html;
}
Apache 的示例:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /subdirectory/index.html [L]
端口和 HTTPS 配置
为了通过 houxinqian.cn 直接访问网站,你需要:
- 将 Web 服务器 (Nginx 或 Apache) 配置为监听 80 端口 (HTTP) 或 443 端口 (HTTPS)。
- 在 DNS 设置中将你的域名
houxinqian.cn指向你的服务器 IP 地址。 - 如果使用 HTTPS,则需要配置证书,并可以根据需要进行 HTTP 到 HTTPS 的重定向。
通过以上步骤,你就能在一个域名下成功部署 Vue.js 和 ThinkPHP6 应用,实现前后端分离的架构。 请根据你的具体环境和配置进行调整。
作者最新文章
Photoshop图层阵列怎么做?复制多个图层并整齐排列
2026-09-22 16:42
3dmax动画技巧总结:动画制作步骤与渲染视频教程
2026-09-22 14:47
思源笔记
2026-09-16 17:42
在线PDF转TXT操作步骤与乱码排查指南
2026-09-04 13:02
PDF加水印后如何检查显示效果?在线工具操作步骤与避坑指南
2026-09-03 13:02
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































