有没有办法让我的 WordPress 网站指向 diste/templates 目录中的 index.html 而不是正常的 WordPress 行为？

Question

我正在使用 Vue.js 开发一个无头 WordPress 网站，并且我有一个名为 vue-wordpress 的自定义主题。该主题是使用 Vue CLI 搭建的。这是目录结构-

• 距离
  • 资产
  • 模板
• 公开
• 来源
• 模板
• 函数.php
• package.json
• 主题.json
• 样式.css

我希望当我的网站加载时它指向的文件是 dist/templates/index.html 而不是 templates/index.html

有谁知道如何实现这一目标？

谢谢你。

Answer 1

如果您想更改包含文件的路径，请在

templates/index.html

中搜索

functions.php

并将其替换为

dist/templates/index.html

。然而，简单地包含 vue 模板附带的 html 文件会导致各种问题，并且可能不是您真正想要做的。

如果您想使用 Vue 作为无头 WordPress 实例的 SPA 前端，我建议您查看 bshiluk/vue-wordpress 主题，它带有许多开箱即用的简洁功能。如果您想手动完成，我建议您阅读此教程。

Answer 2

@superEwald 感谢您分享您对此问题的想法。我检查了这两篇文章，我认为它们都是极好的资源。我刚刚通过在我的functions.php中添加以下代码解决了我遇到的问题-

<?php
/**
 * Portfolio functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package WordPress
 * @subpackage Portfolio
 * @since Portfolio 1.0
 */

// Remove all default WP template redirects/lookups
remove_action( 'template_redirect', 'redirect_canonical' );

// Redirect all requests to index.html so the Vue app is loaded and 404s aren't thrown
function remove_redirects() {
    add_rewrite_rule( '^/(.+)/?', 'index.html', 'top' );
}
add_action( 'init', 'remove_redirects' );

// Load scripts
function load_vue_scripts() {
    $theme_version = wp_get_theme()->get( 'Version' );
    $version_string = is_string( $theme_version ) ? $theme_version : false;

    wp_enqueue_script(
        'vuejs',
        get_template_directory_uri() . '/src/main.js',
        array(),
        $version_string
    );

    wp_enqueue_style(
        'vuejs-css',
        get_template_directory_uri() . '/src/assets/main.css',
        $version_string
    );
}
add_action( 'wp_enqueue_scripts', 'load_vue_scripts');

function add_type_attribute($tag, $handle, $src) {
    // change the script tag by adding type="module" and return it.

    if ( 'vuejs' === $handle ) {
        $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
        return $tag;
    }
}
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);

我不知道这是否是正确的解决方案，但随着我构建 SPA 应用程序的进展，我会这样做。我也想知道您对这段代码的想法。

Answer 3

我还尝试使用 vue 构建无头 WordPress 主题。你能把你的主题的基本设置发给我吗？