VueJS SPA for WP管理菜单页面不能正常工作

VueJS项目是由vue-cli使用Webpack模板生成的。当我为生产而建造时，我得到一个有2个文件夹和1个index.html文件的static文件夹。这2个文件夹是css和js。只有一个css文件。但有3个JavaScript文件。 app.xxxxxxx.js,manifest.xxxxxxxx.js和vendor.xxxxxxx.js。VueJS SPA for WP管理菜单页面不能正常工作

我已经将生产VueJS项目包装在节点服务器和Apache服务器中。为节点服务器，我用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的工程节点。

对于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。

可以肯定的JS和CSS文件加载，因为当你右键点击该网页，看看源代码，然后单击链接到JS和CSS文件，代码显示出来。

的twentyseventeen内的CSS和JS文件结构：

对于admin_sub_page_callback()内的HTML结束，我刚接过<div id="app"></div>从原来的index.html这是从VueJS项目生成的。

来源

2017-07-07 junerockwell

你能发布WordPress输出的完整HTML吗？另外，你在上面发布的'index.html'有一个小错字：'（...）src =/stati/js/manifest（...）'有'stati'而不是'static';既然你说过所有的JavaScript文件都被加载了，我猜猜错字不在你的实际HTML文件中。 –

@NathanWailes我修复了错字。感谢那。 WP的整个HTML输出是200多行代码。我不知道这是否会有所帮助。但是我可以发布正在输出的CSS和JS文件的屏幕截图。点击它们时，会显示它们的内容。 – junerockwell

我已经得到了类似的Vue.js小部件来使用WP，但只使用browserify而不是webpack。

我没有使用vue-cli的browserify模板，尽管它可以使用它。相反，我使用我自己的package.json。这里的要点：https://gist.github.com/maurop123/eb0c8e884fefe3e40c110b33beff48db

这将使整个vue应用程序的单个文件dist/bundle.js。然后我把这个文件放到了我的wp主题的静态js文件中。

接下来，我在functions.php这样增加了wp_enqueue_script线...

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>，在当前渲染模板中的任何位置。

希望有帮助！

来源

2017-07-11 14:44:09 MauroPerez

VueJS SPA for WP管理菜单页面不能正常工作

回答

相关问题