jjzjj

javascript - 用于 WP 管理菜单页面的 VueJS SPA 无法正常工作

coder 2024-05-10 原文

VueJS 项目是由 vue-cli 使用 Webpack 模板生成的。当我为生产而构建时，我得到一个 static有 2 个文件夹和 1 个文件夹的文件夹 index.html文件。这 2 个文件夹是 css和 js .只有一个 css 文件。但是有 3 个 javascript 文件。一个app.xxxxxxx.js , manifest.xxxxxxxx.js , 和 vendor.xxxxxxx.js .

我已将生产 VueJS 项目包装在节点服务器和 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 服务器，我只是从生成的 index.html 中传输了所有 HTML 标记。到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
}

顶级菜单项和子菜单显示了它们应有的样子。但是当我点击 Sub Level Menu 时，它只显示 Subadmin 文本，而不显示在其他环境中工作的 VueJS SPA。

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

twentyseventeen里面的CSS和JS文件结构:

对于 admin_sub_page_callback() 内的 HTML 结尾, 我刚拍了 <div id="app"></div>来自原文index.html这是从 VueJS 项目生成的。

最佳答案

我得到了类似的 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>例如，当前渲染模板中的任何位置。

希望对您有所帮助!

关于javascript - 用于 WP 管理菜单页面的 VueJS SPA 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44980686/

javascriptVueJScode39scriptwordpressvue.js

有关javascript - 用于 WP 管理菜单页面的 VueJS SPA 无法正常工作的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  4. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  5. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  8. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  9. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  10. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

随机推荐