这个VueJS项目是使用Webpack模板通过vue-cli生成的。当我构建用于生产的版本时,我会得到一个
我将生产环境下的VueJS项目包裹在一个Node服务器和一个Apache服务器中。 对于Node服务器,我使用了ExpressJS:
顶级菜单项和子菜单显示正常。但是,当我点击子级菜单时,它只显示“Subadmin”文本,而不是在其他环境中正常工作的VueJS SPA。 当然,JS和CSS文件正在加载,因为当您右键单击网页并查看源代码时,然后单击JS和CSS文件的链接,代码将显示出来。
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。 当然,JS和CSS文件正在加载,因为当您右键单击网页并查看源代码时,然后单击JS和CSS文件的链接,代码将显示出来。
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