用于WP管理菜单页面的VueJS SPA无法正常工作
jun*_*ell 13 javascript wordpress vue.js
VueJS项目由vue-cli使用Webpack模板生成.当我为生产而构建时,我得到一个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到a index.php,并确保读取CSS和JS目录.
我正试着用WordPress做同样的事情.但没有运气.
到目前为止,我对WP所做的是我分别使用wp_enqueue_script()和加载了所有JS和CSS文件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
}
顶级菜单项和子菜单显示它们应该如何.但是当我单击子级菜单时,它只显示Subadmin文本,而不显示在其他环境中工作的VueJS SPA.
当然,JS和CSS文件正在加载,因为当您右键单击该网页并查看源代码时,然后单击指向JS和CSS文件的链接,代码就会显示出来.
里面的CSS和JS文件结构twentyseventeen:
对于里面的HTML端admin_sub_page_callback(),我只是从VueJS项目生成<div id="app"></div>的原始文件index.html中获取.
我已经获得了类似的 Vue.js 小部件来与 WP 一起使用，但仅使用 browserify，而不是 webpack。
我没有使用 vue-cli 的 browserify 模板，尽管它可以使用它。相反，我使用了自己的 package.json。要点如下：https://gist.github.com/maurop123/eb0c8e884fefe3e40c110b33beff48db
dist/bundle.js这将为整个 vue 应用程序创建一个文件。然后我将该文件放入我的 wp 主题的静态 js 文件所在的位置。
接下来，我像这样添加了wp_enqueue_script一行functions.php......
wp_enqueue_script( MD_THEME_NAME.'-bundle', MD_THEME_URI.'/assets/js/bundle.js', array('jquery'), NULL, true );
争论的具体模式可能取决于你的主题。你应该努力让自己wp_enqueue_script看起来像现有的一样。
最后，我添加了所需的 html 元素，例如<div id="vueApp"></div>当前渲染模板中的任何位置。
希望有帮助！
| 归档时间： |
|
| 查看次数： |
394 次 |
| 最近记录： |