如何让WordPress站点指向dist/templates/index.html而非默认模板？

方法1：通过WordPress钩子强制替换模板路径 #

在主题根目录的functions.php中添加以下代码，利用template_include钩子拦截默认模板加载逻辑，优先使用dist目录下的模板：

add_filter('template_include', function($original_template) {
    // 定位dist下的index.html路径
    $dist_index = get_stylesheet_directory() . '/dist/templates/index.html';
    
    // 仅当dist下的文件存在时，替换默认模板
    if (file_exists($dist_index)) {
        // 针对首页请求替换模板，可按需扩展到其他页面类型
        if (is_front_page() || is_home()) {
            return $dist_index;
        }
        // 若要全局替换所有模板请求，可取消以下注释
        // return $dist_index;
    }
    
    // 若dist文件不存在，回退到原始模板
    return $original_template;
});

该方法不破坏WordPress原有的模板层次，仅针对指定场景替换，兼容性更强。

方法2：直接修改主题入口文件 #

如果主题根目录存在index.php（WordPress主题通用默认入口），直接替换其内容为：

<?php
// 直接加载dist目录下的index.html
$dist_index = get_stylesheet_directory() . '/dist/templates/index.html';
if (file_exists($dist_index)) {
    include($dist_index);
} else {
    // 回退到原templates目录下的文件
    include(get_stylesheet_directory() . '/templates/index.html');
}
exit;

这种方式更直接，适合不需要保留原模板层次的无头站点场景。

注意事项 #

• 确保Vue CLI构建后，dist/templates/index.html文件已正确生成，可检查构建脚本是否将模板输出到指定路径
• 测试前清空WordPress缓存（包括插件缓存、服务器缓存），避免加载旧模板路径
• 若需适配页面、文章等其他模板，可在方法1的钩子中添加is_page()、is_single()等判断逻辑

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