这个VueJS项目是使用Webpack模板通过vue-cli生成的。当我构建用于生产的版本时，我会得到一个
我将生产环境下的VueJS项目包裹在一个Node服务器和一个Apache服务器中。 对于Node服务器，我使用了ExpressJS：
顶级菜单项和子菜单显示正常。但是，当我点击子级菜单时，它只显示“Subadmin”文本，而不是在其他环境中正常工作的VueJS SPA。
static文件夹，其中包含2个文件夹和1个index.html文件。这两个文件夹分别是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_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>
<script type=text/javascript src=/static/js/app.6103fd8f82bcb5c38544.js</script>我在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。
twentyseventeen中CSS和JS文件的结构：
admin_sub_page_callback()中的HTML结尾，我只是从VueJS项目生成的原始index.html中取出了<div id="app"></div>。请保留HTML标签。
index.html有一个小错误：(...) src=/stati/js/manifest(...)中的stati应该是static；因为你说所有的 JavaScript 文件都已经被加载了，我猜想这个错误不在你实际的 HTML 文件中。 - Nathan Wailes