2017-07-07 4 views
13

काम नहीं कर रहा है VueJS प्रोजेक्ट वेबपैक टेम्पलेट का उपयोग करके वू-क्ली द्वारा उत्पन्न किया गया था। जब मैंने उत्पादन के लिए बनाया, तो मुझे एक static फ़ोल्डर मिलता है जिसमें 2 फ़ोल्डर्स और 1 index.html फ़ाइल होती है। 2 फ़ोल्डर्स css और js हैं। केवल एक सीएसएस फ़ाइल है। लेकिन 3 जावास्क्रिप्ट फाइलें हैं। एक app.xxxxxxx.js, manifest.xxxxxxxx.js, और vendor.xxxxxxx.jsWP व्यवस्थापक मेनू पृष्ठ के लिए VueJS SPA

मैंने उत्पादन VueJS प्रोजेक्ट को नोड सर्वर और अपाचे सर्वर में लपेट लिया है।

... 
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')); 
}); 
... 

एसपीए नोड के लिए काम करता है: नोड सर्वर के लिए, मैं ExpressJS इस्तेमाल किया।

अपाचे सर्वर के लिए, मैंने जेनरेट index.html से सभी HTML मार्कअप को index.php पर स्थानांतरित कर दिया है और यह सुनिश्चित कर लें कि सीएसएस और जेएस निर्देशिकाएं पढ़ी जाएंगी।

मैं वर्डप्रेस के साथ ऐसा करने की कोशिश कर रहा हूं। लेकिन कोई भाग्य नहीं है।

मैंने अब तक WP के साथ क्या किया है यह है कि मैंने क्रमशः wp_enqueue_script() और wp_enqueue_style() का उपयोग करके सभी जेएस और सीएसएस फ़ाइलों को लोड किया है। लेकिन मुझे सीएसएस और जेएस फाइलों के साथ काम करने के लिए एचटीएमएल मार्कअप नहीं मिल सकता है। शायद यह समस्या है। मुझे क्या याद आ रही है?

यह वही है 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 
} 

शीर्ष स्तर मेनू आइटम और उप मेनू दिखा रहे हैं कि वे कैसे होना चाहिए। लेकिन जब मैं उप-स्तर मेनू पर क्लिक करता हूं, तो यह केवल सबडमिन टेक्स्ट दिखाता है, न कि VueJS SPA जो अन्य वातावरण में काम करता है। क्योंकि जब आप सही वेबपेज पर क्लिक करें और स्रोत कोड देखते हैं, तो जे एस और सीएसएस फ़ाइलों के लिंक पर क्लिक करें

Subadmin text showing instead of the VueJS SPA

यकीन के लिए, जे एस और सीएसएस फ़ाइलें लोड कर रहे हैं, कोड दिखाई देते हैं।

The CSS file link tag Screenshot

The JS file script tags Screenshot

सीएसएस और twentyseventeen अंदर जे एस फ़ाइल संरचना:

The CSS and JS file structure inside the twentyseventeen

admin_sub_page_callback() अंदर एचटीएमएल अंत के लिए, मैं सिर्फ मूल index.html से <div id="app"></div> ले लिया जो VueJS परियोजना से उत्पन्न किया गया था।

+0

क्या आप पूर्ण HTML पोस्ट कर सकते हैं जो वर्डप्रेस आउटपुट कर रहा है? साथ ही, ऊपर सूचीबद्ध 'index.html' में एक छोटा टाइपो है: '(...) src =/stati/js/manifest (...)' 'स्थिर' के बजाय' stati' है; चूंकि आपने कहा है कि सभी जावास्क्रिप्ट फाइलें लोड की जा रही हैं, मुझे लगता है कि टाइपो आपकी वास्तविक HTML फ़ाइल में नहीं है। –

+0

@NathanWailes मैंने टाइपो को ठीक किया। उसके लिए धन्यवाद। WP से संपूर्ण HTML आउटपुट 200+ कोड कोड है। मुझे नहीं पता कि इससे मदद मिलेगी या नहीं। लेकिन मैं आउटपुट किए जा रहे सीएसएस और जेएस फाइलों के स्क्रीनशॉट पोस्ट कर सकता हूं। और उन्हें क्लिक करते समय, उनकी सामग्री दिखायी जाती है। – junerockwell

उत्तर

2

मुझे WP के साथ काम करने के लिए समान Vue.js विजेट प्राप्त हुए हैं, लेकिन केवल वेबपैक के बजाय ब्राउज़रइफ़ का उपयोग करना है।

मैंने vue-cli के ब्राउज़र टेम्पलेट का उपयोग नहीं किया, हालांकि यह इसके साथ काम कर सकता था। इसके बजाय मैंने अपना खुद का पैकेज इस्तेमाल किया। जेसन।यहां दिया गया है: https://gist.github.com/maurop123/eb0c8e884fefe3e40c110b33beff48db

जो पूरे vue ऐप के लिए एक फ़ाइल dist/bundle.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 को मौजूदा की तरह दिखने का प्रयास करना चाहिए।

अंत में, मैंने वर्तमान में प्रस्तुत टेम्पलेट में कहीं भी <div id="vueApp"></div> जैसे एचटीएमएल तत्व को जोड़ा है।

आशा है कि मदद करता है!

संबंधित मुद्दे