如何在WordPress后台与前端通过短代码渲染同一Vue组件

你的代码目前有两个核心问题：Vue资源仅在后台加载、DOM容器ID冲突，以下是具体修改方案：

1. 让Vue资源同时支持后台与前端加载 #

原代码仅通过admin_enqueue_scripts钩子在后台加载Vue的JS和CSS，前端页面无法获取这些资源。我们可以调整资源加载逻辑，同时支持后台和前端，或者在短代码执行时按需加载资源。

2. 避免DOM容器ID冲突 #

后台和前端都使用id="app"会导致Vue只能挂载第一个匹配的容器，因此需要给短代码的容器设置唯一ID（比如vue-shortcode-app），并让Vue根据环境选择对应的挂载目标。

修改后的完整代码 #

<?php

/*
Plugin Name: My Admin Plugin
Description: This plugin adds an admin dashboard view and front-end shortcode for Vue app.
Version: 1.1
Author: Your Name
*/

function my_admin_menu_page() {
    add_menu_page(
        'My Admin Page',  // Page title
        'My Admin Plugin', // Menu title
        'manage_options',  // Capability required to access
        'my-admin-page',   // Menu slug
        'my_admin_page_callback', // Callback function to render content
        'dashicons-admin-plugins', // Icon URL or dashicon class
        20 // Menu position
    );
}
add_action('admin_menu', 'my_admin_menu_page');

function my_admin_page_callback() {
    ?>
        <h1>My Admin Page</h1>
        <div id="app">
        </div>

<?php 
}

function my_shortcode_function() { 
    // 按需加载Vue资源，避免全局加载浪费性能
    if (!wp_script_is('app-script', 'enqueued')) {
        wp_enqueue_script('app-script', plugins_url('/testproject/dist/assets/index-d7bd537c.js', __FILE__), array(), null, true);
    }
    if (!wp_style_is('app-style', 'enqueued')) {
        wp_enqueue_style('app-style', plugins_url('/testproject/dist/assets/index-fc5f319f.css', __FILE__));
    }
    
    ob_start();
    ?>
    <!-- 使用唯一ID避免与后台容器冲突 -->
    <div id="vue-shortcode-app">
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('vue_shortcode', 'my_shortcode_function');


function enqueue_vue_script() {
    $script_url = plugins_url('/testproject/dist/assets/index-d7bd537c.js', __FILE__);
    wp_enqueue_script('app-script', $script_url, array(), null, true);
    
    // 传递挂载点配置给Vue，让它根据环境选择挂载目标
    $mount_point = is_admin() ? '#app' : '#vue-shortcode-app';
    wp_localize_script('app-script', 'vueMountConfig', array(
        'mountPoint' => $mount_point
    ));
    
    wp_enqueue_style('app-style', plugins_url('/testproject/dist/assets/index-fc5f319f.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'enqueue_vue_script');

调整Vue项目的入口文件 #

打开Vue项目的入口文件（如main.js），修改挂载逻辑，读取WordPass传递的配置：

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

// 根据WordPress传递的配置选择挂载点
const mountElement = window.vueMountConfig?.mountPoint || '#app';
createApp(App).mount(mountElement);

额外注意事项 #

• 确认插件目录下testproject/dist/assets/路径中的JS、CSS文件存在，文件名与代码中一致
• 清除WordPress缓存和浏览器缓存，避免旧资源影响效果
• 如果使用Vue 2，挂载逻辑改为new Vue({ el: mountElement })

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