添加自定义Vue插件后WordPress功能异常，新建页面空白

我开发了一个Vue插件，已在WordPress后台及前端完成入队加载，插件显示正常，但点击新建页面时出现空白页，禁用插件后恢复正常。

插件入队代码 #

<?php

/*
Plugin Name: Verus Vue Plugin
Description: This plugin adds an admin dashboard view.
Version: 1.0
Author: Ahmed Shah
*/

function my_admin_menu_page() {
    add_menu_page(
        'Verus Data',  // Page title
        'Staking Rewards', // Menu title
        'manage_options',  // Capability required to access
        'my-admin-page',   // Menu slug
        'render_content', // 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 render_content() {
    ?>
        <h1>Verus Blocks</h1>
        <div id="app">
        </div>
<?php
}

function render_shortcode() {
    ?>
        <h1>Verus Blocks</h1>
        <div id="app">
        </div>
<?php
}

add_shortcode('vue_shortcode', 'render_shortcode');


function admin_enqueue() {

    wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
}

function enqueue_vue_script() {

    wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
}

add_action('admin_enqueue_scripts', 'admin_enqueue');
add_action('wp_enqueue_scripts', 'enqueue_vue_script');

浏览器控制台报错 #

index.php:773 Uncaught TypeError: Assignment to constant variable.
    at index.php:773:11
    at index.php:781:4
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 jQuery.Deferred exception: Cannot read properties of undefined (reading '__') TypeError: Cannot read properties of undefined (reading '__')
    at HTMLDocument.<anonymous> (https://veruswp.sink.cakeshop.dev/wp-admin/js/site-health.min.js?ver=6.3.1:2:36)
    at e (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:26990)
    at t (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:27292) undefined
ce.Deferred.exceptionHook @ load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'dateI18n') TypeError: Cannot read properties of undefined (reading 'dateI18n')
    at HTMLDocument.<anonymous> (https://veruswp.sink.cakeshop.dev/wp-admin/js/dashboard.min.js?ver=6.3.1:2:2984)
    at e (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:26990)
    at t (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:27292) undefined
ce.Deferred.exceptionHook @ load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'init') TypeError: Cannot read properties of undefined (reading 'init')
    at HTMLDocument.<anonymous> (https://veruswp.sink.cakeshop.dev/wp-admin/js/svg-painter.js?ver=6.3.1:19:18)

新建页面额外提示 #

Mixed Content: The page at 'https://veruswp.sink.cakeshop.dev/wp-admin/post-new.php?post_type=page' was loaded over HTTPS, but requested an insecure element 'http://0.0.0.20/'. This request was not upgraded to HTTPS because its URL's host is an IP address.

1. 限制Vue脚本仅在目标页面加载 #

当前脚本在所有后台和前端页面都加载，导致和WordPress原生JS冲突（控制台报错里的__、dateI18n都是WP原生函数，被Vue脚本破坏）。

修改后台入队函数，仅在自定义菜单页面加载：

function admin_enqueue($hook) {
    // 只在"my-admin-page"页面加载脚本
    if ($hook !== 'toplevel_page_my-admin-page') {
        return;
    }
    wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
}

前端入队函数限制为仅包含短码的页面：

function enqueue_vue_script() {
    global $post;
    // 检查当前页面是否包含vue_shortcode短码
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'vue_shortcode')) {
        wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
        wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
    }
}

2. 修复Vue构建的全局变量冲突 #

Assignment to constant variable错误说明Vue打包脚本尝试修改常量变量，大概率和WP全局变量重名：

• 检查Vue项目配置，开启命名空间或修改打包后的全局变量名，避免和wp、jQuery等冲突。
• 打包时设置output.globalObject为this，防止污染全局作用域。

3. 解决混合内容问题 #

http://0.0.0.20/的不安全请求来自Vue插件：

• 检查Vue项目中是否硬编码了该HTTP地址，改为HTTPS或相对路径。
• 若为API请求，使用WordPress的home_url()生成正确的HTTPS地址，不要直接写IP。

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