Angular项目中放置WordPress文件夹可否通过/blog路径访问？

结论 #

默认情况下该方案不可行，仅在生产环境搭配自定义Web服务器配置时可实现该访问路径。

不可行的核心原因 #

你本地通过ng serve启动的Angular开发服务器存在两个无法适配WordPress的限制：

• 为了支持Angular的哈希/History前端路由，ng serve会将所有未匹配到静态资源的请求全部返回Angular入口文件index.html，你访问/blog路径时会直接被Angular路由拦截，无法加载到WordPress的文件
• WordPress是依赖PHP运行环境、MySQL数据库的动态程序，ng serve仅具备静态资源托管能力，不支持PHP解析，就算能访问到blog文件夹下的文件也无法运行WordPress的动态逻辑

可行的适配方案 #

方案1：生产环境同域名子路径部署（可实现/blog访问需求）

该方案需要你用Nginx、Apache等专业Web服务器托管部署，而非使用ng serve的开发服务器：

1. 执行ng build构建Angular应用，将构建生成的dist目录下的所有文件作为Web服务器的根目录资源
2. 将完整的WordPress项目放在dist目录下，命名为blog
3. 配置Web服务器的路由规则：
   • 所有路径前缀为/blog的请求，优先匹配blog目录下的文件，PHP请求转发到PHP-FPM处理，同时配置WordPress所需的伪静态规则
   • 其余所有请求返回Angular的index.html，保障前端路由正常运行
4. 提前进入WordPress后台，将站点地址（Site URL）、首页地址（Home URL）修改为对应路径，比如http://你的域名/blog，避免静态资源加载错误

方案2：子域名独立部署（维护成本最低）

直接给WordPress配置独立的子域名，比如blog.example.com，Angular应用使用主域名example.com，两个服务独立部署、互不干扰，不需要处理路由冲突、环境兼容问题，后续升级维护也更简单。

方案3：无头CMS集成

如果你不需要对外暴露WordPress的原生前端，仅需要用到它的内容管理能力，可以将WordPress作为无头CMS使用：

• 开启WordPress的REST API/GraphQL接口能力
• 在Angular应用中调用对应接口拉取博客内容，在Angular侧自定义渲染内容
• 该方式下两个服务可以完全独立部署，用户全链路都在Angular应用内，体验统一性更高

内容的提问来源于stack exchange，提问作者Prashanth Mundrathi