Vue router 4 无法在 WordPress 自定义主题中工作

Question

我正在为 WordPress 设置编写一个自定义 vue 3 主题。所有 php 逻辑都工作正常，我正在做一些代码优化，我决定安装 vue router 4 将原始 vue 模板拆分为单独的组件。

我的 vue 路由器实现代码如下

import { createRouter, createWebHistory } from 'vue-router'
//
import Home from '../components/UserLanding.vue'
import RegistrationForm from '../components/UserRegistration.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            name: 'UserLanding',
            path: '/',
            component: Home
        },
        {
            name: 'UserRegistration',
            path: '/registration',
            component: RegistrationForm 
        }
    ]
})

export default router

在我的 App.vue 文件中，我有这段代码，应该显示与我的网站主路径关联的 vue 组件

<template>
    <div class="container-fluid p-0" id="mainWrapper">
        <!-- Show selected link using vue router-view -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {

        }
    },
    mounted() {

    }, 
    methods: {

    }
}
</script>
<style scoped>

</style>

目前我在我的开发环境中只看到一个空白页面。控制台中没有记录任何错误，我不知道如何解决这个问题。

我正在index.php 文件中加载vue 应用程序，该文件是我创建的wp 主题的一部分，并且是一个页面模板。我为网站的不同部分提供了不同的模板。文件内容如下

<?php
/*
* Template Name: Pagina Home
*/
  get_header();
?>
  <div id="app"></div>
<?php 
  get_footer();
?>

这就是我使用主题的functions.php文件加载所有资源的方式

<?php

function init_frontend_scripts()
{
    if( is_page('home') || is_page('pagina-errore') ){
        wp_register_script('frontend-js', get_template_directory_uri() . '/assets/frontend-index.js', array(), false, true );
        wp_enqueue_script('frontend-js');
        
        if( !is_page('login') || !is_page('pagina-errore') ){
            wp_localize_script(
                'frontend-js', 
                'wp_params',
                array(
                    //'loginurl' => esc_url_raw( site_url('/login') ),
                    'resturl' => esc_url_raw( rest_url('/api/v1/') ),
                    //'adminurl' => admin_url('admin-ajax.php')
                    'nonce' => wp_create_nonce('wp_rest')
                )
            );
        }
        
        wp_register_style('frontend-css', get_template_directory_uri() . '/assets/frontend-index.css');
        wp_enqueue_style('frontend-css');
    }

    if( is_page('gestione-clienti') && is_user_logged_in() ){
        wp_register_script('backend-js', get_template_directory_uri() . '/assets/backend-index.js', array(), false, true );
        wp_enqueue_script('backend-js');
        wp_localize_script(
            'backend-js', 
            'wp_params',
            array(
                'resturl' => esc_url_raw( rest_url('/api/v1/') ),
                'nonce' => wp_create_nonce('wp_rest'),
                'logouturl' => esc_url_raw( wp_logout_url() )
            )
        );
        wp_register_style('backend-css', get_template_directory_uri() . '/assets/backend-index.css' );
        wp_enqueue_style('backend-css');
    }

    if( is_page('profilo-utente') && is_user_logged_in() ){
        $user = wp_get_current_user();
        wp_register_script('profile-js', get_template_directory_uri() . '/assets/profile-index.js', array(), false, true );
        wp_enqueue_script('profile-js');
        wp_localize_script(
            'profile-js', 
            'wp_params',
            array(
                'userID' => $user->data->ID,
                'resturl' => esc_url_raw( rest_url('/api/v1/') ),
                'nonce' => wp_create_nonce('wp_rest'),
                'logouturl' => esc_url_raw( wp_logout_url() )
            )
        );
        wp_register_style('profile-css', get_template_directory_uri() . '/assets/profile-index.css' );
        wp_enqueue_style('profile-css');
    }

    if( is_page('password-reset') && is_user_logged_in() ){
        $user = wp_get_current_user();
        wp_register_script('password-js', get_template_directory_uri() . '/assets/password-index.js', array(), false, true );
        wp_enqueue_script('password-js');
        wp_localize_script(
            'password-js', 
            'wp_params',
            array(
                //'userID' => $user->data->ID,
                'resturl' => esc_url_raw( rest_url('/talento/v1/') ),
                'profileurl' => esc_url_raw( site_url('/profilo-utente') ),
                'nonce' => wp_create_nonce('wp_rest')
            )
        );
        wp_register_style('password-css', get_template_directory_uri() . '/assets/password-index.css' );
        wp_enqueue_style('password-css');
    }

    //icone bootstrap
    wp_enqueue_style('bootstrap-icons', 'https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css');
}

add_action('wp_enqueue_scripts', 'init_frontend_scripts');

function add_responsive_meta_tag()
{

    echo '<meta name="viewport" content="width=device-width, initial-scale=1">';

}
add_action('wp_head', 'add_responsive_meta_tag');

function custom_login_logo() 
{ 
    ?>
        <style type="text/css">

            body {
                background-color: #10346f !important;
            }
            #login h1 a, .login h1 a {
                background-image: url('localhost/wpdev/wp-content/uploads/2023/01/picwish.png');
                height:65px;
                width:320px;
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                padding-bottom: 30px;
            }
            #loginform {
                border-radius: 5%;
            }
            #nav {
                display: none;
            }
            #language-switcher {
                display: none;
            }
        </style>
    <?php 
}
add_action('login_enqueue_scripts', 'custom_login_logo');

?>

谁能帮我找到解决办法吗？

Answer 1

历史记录：createWebHistory('/vartik/wordpress/index.php/vue_app_name/'),