Question

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服务器，我只是将生成的index.html中的所有HTML标记转移到index.php，并确保读取了CSS和JS目录。

我试图用WordPress做同样的事情。但没有运气。

到目前为止，我对WP所做的是，我分别使用wp_enqueue_script()和wp_enqueue_style()加载了所有JS和CSS文件。但我无法将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
}

顶级菜单项和子菜单正在显示它们应该如何。但是当我单击子级菜单时，它只显示Subadmin文本，而不显示在其他环境中工作的VueJS SPA。