Страница VueJS SPA для WP admin не работает

Проект VueJS был создан vue-cli с использованием шаблона Webpack. Когда я создавал для производства, я получаю одну папку static, которая имеет 2 папки и 1 index.html файл. 2 папки: css и js. Там только один файл css. Но есть 3 файла javascript. app.xxxxxxx.js, manifest.xxxxxxxx.js и vendor.xxxxxxx.js.

Я завернул проект VueJS на сервере Node и сервере Apache. Для сервера Node я использовал ExpressJS:

...
app.use('/public', express.static(__dirname + '/public'));
app.use('/static', express.static(__dirname + '/public/static'));
app.use('/js', express.static(__dirname + '/public/static/js'));
app.use('/css', express.static(__dirname + '/public/static/css'));
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});
...

SPA работает для Node.

Для сервера Apache я просто передал всю разметку HTML из сгенерированного index.html в index.php и убедитесь, что прочитаны каталоги CSS и JS.

Я пытаюсь сделать то же самое с WordPress. Но не повезло.

Что я сделал с WP до сих пор, так это то, что я загрузил все файлы JS и CSS, используя wp_enqueue_script() и wp_enqueue_style(), соответственно. Но я не могу заставить html-разметку работать вместе с CSS и JS файлами. Возможно, это проблема. Что мне не хватает?

Вот как выглядел бы index.html после создания из производства:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>wan_admin3</title>

   <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

<link href=/static/css/app.49437cdf2228a91c12a30d39ae35bb58.css rel=stylesheet>
</head>

<body>

<div id=app></div>
<script type=text/javascript src=/static/js/manifest.989a96caedc89ff03309.js</script>
<script type=text/javascript src=/static/js/vendor.86018170deacaae1d066.js</script>
<script type=text/javascript src=/static/js/app.6103fd8f82bcb5c38544.js</script>
</body>
</html>

Что я сделал в WP functions.php

add_action( 'admin_menu', 'register_my_menu_item' );
function register_my_menu_item() {
   $my_plugins_page = add_menu_page(
     'General Page',
     'General Page',
     'manage_options',
     'mt-top-level-handle',
     'my_plugins_page_callback'
   );
   $subadmin_page = add_submenu_page(
     'mt-top-level-handle',
     'submenu-admin',
     'Sub Level Menu',
     'manage_options',
     'submenu_admin_page',
     'admin_sub_page_callback'
   );
  add_action( 'load-' . $subadmin_page, 'do_enqueue' );
}
function do_enqueue() {
  wp_enqueue_style(
    'subadmin_css_sheet',
    get_theme_file_uri( 'some-admin/subadmin/css/app.49437cdf2228a91c12a30d39ae35bb58.css'),
    array(),
    '1.0.0'
  );
  wp_enqueue_script(
    'subadmin_app_script',
    get_theme_file_uri('some-admin/subadmin/js/app.6103fd8f82bcb5c38544.js'),
    array(),
    '1.0.0',
    true
  );
  wp_enqueue_script(
    'subadmin_manifest_script',
    get_theme_file_uri( 'some-admin/subadmin/js/manifest.989a96caedc89ff03309.js'),
    array(),
    '1.0.0',
    true
  );
  wp_enqueue_script(
    'subadmin_vendor_script',
    get_theme_file_uri( 'some-admin/subadmin/js/vendor.86018170deacaae1d066.js'),
    array(),
    '1.0.0',
    true
  );
}
function my_plugins_page_callback() {
?>
   <div>Hello</div>
<?php
}
function admin_sub_page_callback() {
?>
  <div id="app">Subadmin</div>
<?php
}

Элемент меню верхнего уровня и подменю показывают, как они должны быть. Но когда я нажимаю меню Sub Level, он отображает только текст Subadmin, а не VueJS SPA, который работает в других средах.

Конечно, файлы JS и CSS загружаются, потому что когда вы щелкните правой кнопкой мыши веб-страницу и посмотрите исходный код, затем щелкните ссылки на файлы JS и CSS, появятся коды.

Структура файла CSS и JS внутри twentyseventeen:

Для конца HTML внутри admin_sub_page_callback() я просто взял <div id="app"></div> из исходного index.html, который был сгенерирован из проекта VueJS.

Ответ 1