Javascript WP管理菜单页面的VueJS SPA不工作_Javascript_Wordpress_Vue.js

Javascript WP管理菜单页面的VueJS SPA不工作

javascript wordpress vue.js

Javascript WP管理菜单页面的VueJS SPA不工作,javascript,wordpress,vue.js,Javascript,Wordpress,Vue.js,VueJS项目是由vue cli使用Web包模板生成的。当我为生产构建时，我得到一个static文件夹，其中有2个文件夹和1个index.html文件。这两个文件夹是css和js。只有一个css文件。但是有3个javascript文件。一个app.xxxxxxx.js，manifest.xxxxxxx.js，和vendor.xxxxxxx.js 我已将生产VueJS项目包装在节点服务器和Apache服务器中。对于节点服务器，我使用了ExpressJS： ... app.use('/public

VueJS项目是由vue cli使用Web包模板生成的。当我为生产构建时，我得到一个

static

文件夹，其中有2个文件夹和1个

index.html

文件。这两个文件夹是

css

和

js

。只有一个css文件。但是有3个javascript文件。一个

app.xxxxxxx.js

，

manifest.xxxxxxx.js

，和

vendor.xxxxxxx.js

我已将生产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服务器，我只是将所有HTML标记从生成的

index.HTML

传输到

index.php

，并确保读取CSS和JS目录

我也在尝试用WordPress做同样的事情。但是没有运气。

到目前为止，我对WP所做的是，我分别使用

WP\u enqueue\u script（）

和

WP\u enqueue\u 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>

顶级菜单项和子菜单显示了它们应该是什么样子。但是，当我单击子级别菜单时，它只显示子管理员文本，而不显示在其他环境中工作的VueJS SPA

当然，JS和CSS文件正在加载，因为当您右键单击网页并查看源代码，然后单击指向JS和CSS文件的链接时，代码就会显示出来

Twenty17

中的CSS和JS文件结构：

对于

admin\u sub\u page\u callback（）

中的HTML端，我只是从VueJS项目生成的原始

index.HTML

中获取了

。

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

我没有使用vue cli的browserify模板，尽管它可以使用该模板。相反，我使用了自己的package.json。要点如下：

这将为整个vue应用程序创建一个文件

dist/bundle.js

。然后，我将该文件放入我的wp主题的静态js文件所在的位置

接下来，我在

functions.php

中添加了一行

wp\u enqueue\u脚本，如下所示
wp_-enqueue_脚本（MD_-THEME_-NAME.-bundle'，MD_-THEME_-URI./assets/js/bundle.js'，array（'jquery'），NULL，true）；

参数的特定模式可能取决于您的主题。您应该尝试使您的wp\u enqueue\u脚本
看起来像现有脚本
最后，我添加了所需的html元素，例如，在当前呈现的模板中的任何位置
希望有帮助
 你能发布WordPress输出的完整HTML吗？另外，您在上面发布的index.html
有一个小错误：（…）src=/stati/js/manifest（…）
有stati
，而不是static；既然你说所有的JavaScript文件都在加载中，我猜你的HTML文件中没有拼写错误。@NathanWailes我已经纠正了拼写错误。谢谢你。WP的整个HTML输出是200多行代码。我不知道这是否有用。但是我可以发布正在输出的CSS和JS文件的截图。单击它们时，将显示其内容。
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
}