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管理菜單頁面不能正常工作

回答

相關問題