मैंने हाल ही में वेबपैक पर स्विच किया है और मेरे सभी जेएस और सीएसएस अब इसके माध्यम से पूरी तरह से चल रहे हैं। यहाँ webpack.config.js का प्रासंगिक अंश है:

rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            {loader: 'import-glob-loader'}
        ]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            {loader: MiniCssExtractPlugin.loader},
            {loader: 'css-loader'},
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('autoprefixer')
                    ]
                }
            },
            {loader: 'sass-loader'},
            {loader: 'import-glob-loader'}
        ]
    }
]

मेरे पास सीडीएन से वीयू शामिल है और इस सेटअप के साथ मैं निम्नलिखित कोई समस्या नहीं कर सकता:

Vue.component('test-component', {
    data: function () {
        return {
            title: 'Title',
            description: 'Description'
        };
    },
    methods: {
        created: function () {
            console.log('Created');
        }
    },
    template: '<section id="test-component"><h2>{{ title }}</h2>{{ description }}</section>'
});

new Vue({el: '#app'});

और मेरे एचटीएमएल में:

<div id="app">
    <test-component></test-component>
</div>

मैं अब इसके बजाय Vue एकल फ़ाइल घटकों का उपयोग करना चाहूंगा, और डॉक्स को पढ़कर यह मुझे केवल vue-loader के माध्यम से .vue फ़ाइलों को चलाने के लिए कहता है, इसलिए मैंने अपने नियमों को निम्नलिखित में बदल दिया:

rules: [
    // NOTE: This is new
    {
        test: /\.vue$/,
        loader: 'vue-loader'
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            {loader: 'import-glob-loader'}
        ]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            {loader: MiniCssExtractPlugin.loader},
            {loader: 'css-loader'},
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('autoprefixer')
                    ]
                }
            },
            // NOTE: This is new too, but commented because it throws errors
        //  {loader: 'vue-style-loader'},
            {loader: 'sass-loader'},
            {loader: 'import-glob-loader'}
        ]
    }
]

इसके साथ मेरी .vue फ़ाइलें उठाई जाती हैं और dist/main.js में जोड़ दी जाती हैं, इसलिए यह काम करने लगता है (जब तक मैं Vue फ़ाइल में <style> तत्व शामिल नहीं करता, जिस स्थिति में यह विफल हो जाता है ), लेकिन अब new Vue({el: '#app'}) बिल्कुल कुछ नहीं करता है। DOM की जाँच करना <test-component> अभी भी है और Vue द्वारा बिल्कुल भी प्रस्तुत नहीं किया गया है।

अगर मैं vue-style-loader को सक्षम करने का भी प्रयास करता हूं तो बिल्ड पूरी तरह से विफल हो जाता है:

(1:4) Unknown word

    > 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
        |    ^
      2 | 
      3 | // load the styles

मुझसे यहां क्या गलत हो रहा है?

संपादित करें: प्रगति। डेनियल के लिए धन्यवाद मेरा <style> अब तब तक काम करता है जब तक उसमें lang="scss" सेट हो। ऐसा इसलिए है क्योंकि मेरे वेबपैक कॉन्फिगर में केवल scss फाइलों के लिए नियम हैं, न कि css फाइलों के लिए।

मैंने यह भी पता लगा लिया है कि <test-component> के रेंडर नहीं होने का कारण यह है कि मैं वास्तव में इसे कभी पंजीकृत नहीं करता, बस .vue-फाइल सहित, यह स्पष्ट रूप से पंजीकृत होने के लिए पर्याप्त नहीं है।

अब मुझे जो समस्या आ रही है, वह मेरे सभी .vue-फ़ाइलों को घटकों की एक सरणी के रूप में आयात करने का प्रयास कर रही है। अगर मैं ऐसा करता हूं तो यह ठीक काम करता है:

import TestComponent from "./test-component.vue";
import AnotherComponent from "./another-component.vue";

document.querySelectorAll('[data-vue]').forEach(el => {
    new Vue({
        el: el, 
        components: {
            'test-component': TestComponent, 
            'another-component': AnotherComponent
        }
    });
});

लेकिन मैं इसे कुछ कैसे करने में सक्षम होना चाहता हूं:

import components from "./**/*.vue";

document.querySelectorAll('[data-vue]').forEach(el => {
    new Vue({
        el: el, 
        components: components
    });
});

import-glob-loader का उपयोग करना।

0
powerbuoy 3 अक्टूबर 2019, 18:13

2 जवाब

सबसे बढ़िया उत्तर

केवल vue फ़ाइलें आयात करना उनके उपयोग के लिए उपलब्ध होने के लिए पर्याप्त नहीं है। आपको उन्हें Vue के साथ पंजीकृत भी करना होगा।

तो, यह गलत है:

import 'component.vue';

new Vue({el: '#app'});

यह सही है:

import component from 'component.vue';

new Vue({
    el: '#app', 
    components: {
        'component': component
    }
});

यह उन्हें प्रयोग करने योग्य बनाने का ख्याल रखता है।

<style> तत्वों के काम न करने का कारण यह है कि मेरे पास CSS फाइलों के लिए वेबपैक नियम नहीं है - केवल SCSS फाइलों के लिए। यह इंगित करने के लिए @Daniel का धन्यवाद कि मुझे <style lang="scss"> की आवश्यकता है।

vue-style-loader को केवल <style> तत्वों के रूप में DOM में शैलियों को इंजेक्ट करने की आवश्यकता है, जिनका मैं वास्तव में उपयोग नहीं करता (मैं mini-css-extract-plugin का उपयोग css-फाइल बनाने के लिए करता हूं) के अनुसार भी दस्तावेज़:

हालाँकि, चूंकि यह एक निर्भरता के रूप में शामिल है और डिफ़ॉल्ट रूप से vue-loader में उपयोग किया जाता है, ज्यादातर मामलों में आपको इस लोडर को स्वयं कॉन्फ़िगर करने की आवश्यकता नहीं होती है।

ग्लोब आयात के संबंध में एक अलग प्रश्न तैयार करेगा।

0
powerbuoy 5 अक्टूबर 2019, 09:44

सुनिश्चित करें कि आपके एसएफसी में <style lang="scss"> है

आप पैकेज-लॉक और नोड_मॉड्यूल्स फ़ोल्डर को हटाने का भी प्रयास कर सकते हैं और एक क्लीन इंस्टाल कर सकते हैं। कभी-कभी यह किसी समस्या का समाधान कर सकता है यदि निर्भरताएँ संगत संस्करणों का उपयोग नहीं कर रही हैं।


अद्यतन

ग्लोब स्टाइल इंपोर्ट का उपयोग करके आयात करने के लिए आपको import-glob का उपयोग करने की आवश्यकता हो सकती है

https://www.npmjs.com/package/import-glob

आप वैश्विक घटक पंजीकरण का उपयोग करके भी समान परिणाम प्राप्त कर सकते हैं। यह आधिकारिक डॉक्स में अच्छी तरह से प्रलेखित है: https://vuejs.org/ v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components

1
Daniel 4 अक्टूबर 2019, 18:09
मैं अभी तक किसी भी शैली का उपयोग नहीं कर रहा हूं। और जब मैंने इसका इस्तेमाल करने की कोशिश की तो मैंने सादा सीएसएस की कोशिश की - कोई एसएएसएस नहीं। मुझे जो समस्या हो रही है वह यह है कि मेरा घटक बिल्कुल प्रस्तुत नहीं करता है। निश्चित नहीं है कि मुझे node_modules और पैकेज-लॉक को हटाने की आवश्यकता क्यों होगी?
 – 
powerbuoy
3 अक्टूबर 2019, 19:16
बस अगर निर्भरता संस्करण अच्छा नहीं खेल रहे हैं। यह कुछ ऐसा दिखता है जैसे "मेरी मशीन पर ठीक काम करता है ¯\_(ツ)_/¯" समस्या
 – 
Daniel
3 अक्टूबर 2019, 19:50
आह ठीक है मैं देखता हूँ। हालांकि मुझे एक बात का एहसास हुआ, मैं वास्तव में अपने एसएफसी को कहीं भी पंजीकृत नहीं कर रहा हूं जैसे कि मैं Vue.component उदाहरण के साथ हूं। मैं सिर्फ vue फ़ाइल आयात कर रहा हूँ और कुछ नहीं। तो शायद यही मेरा मुद्दा है। एक बार कंप्यूटर के पास वापस मिल जाएगा।
 – 
powerbuoy
3 अक्टूबर 2019, 19:53
ठीक है तो कुछ चीज़ें: 1) lang="scss" का उपयोग करने से वास्तव में मेरा <style> काम हो जाता है इसलिए इसके लिए धन्यवाद (मैं इसे समझता हूं क्योंकि मेरे पास केवल scss फाइलों के लिए एक वेबपैक नियम है और नहीं css के लिए) और 2) घटक के प्रस्तुत नहीं होने का कारण यह है कि यह कभी पंजीकृत नहीं होता है। मैंने अपनी नई समस्याओं के साथ अपना प्रश्न अपडेट कर लिया है। आपकी सहायता के लिए धन्यवाद
 – 
powerbuoy
4 अक्टूबर 2019, 08:46
मैं import-glob-loader (npmjs.com/package/import-glob-loader का उपयोग कर रहा हूं ) पहले से ही, समस्या यह है कि मैं सभी vue-फ़ाइलों को आयात नहीं कर सकता और फिर उन्हें new Vue() में भेज सकता हूं क्योंकि उन सभी को एक में आयात करने का कोई तरीका प्रतीत नहीं होता है। सरणी। webpack-import-glob-loader हालांकि इसका समर्थन करता प्रतीत होता है, इसलिए मैं इसकी जांच करूंगा: npmjs.com/package/webpack-import-glob-loader
 – 
powerbuoy
5 अक्टूबर 2019, 09:30