vue + webpack project img स्थिर स्रोत

Question

मेरे vue (2.0) + वेबपैक प्रोजेक्ट में, मैं कॉन्फ़िगर vue-html-loader लोड नहीं कर सकता, लेकिन मेरे .vue फ़ाइलों में img टैग स्थिर स्रोत छवियों को लोड नहीं कर सकता है।

<img src="/web/img/sieleLogo@1x.png" srcset="/web/img/sieleLogo@2x.png" /> 

मेरे ब्राउज़र हमेशा 404 त्रुटि बाहर आ:

module: { 
    loaders: [ 
     ... 
     { 
      test: /\.html$/, 
      exclude: /node_modules/, 
      loaders: ['html', 'html-minify'] 
     } 
     , { 
      test: /\.vue$/, 
      loader: 'vue' 
     } 
     ... 
    ] 
}, 
vue: { 
    ... 
    html: { 
     root: path.resolve(__dirname, './source/static'), 
     attrs: ['img:src', 'img:srcset'] 
    }, 
    loaders: { 
     css: ExtractTextPlugin.extract("css"), 
     sass: ExtractTextPlugin.extract("css!sass") 
    } 
}, 
resolve: { 
    root: [ 
     path.resolve('./source') 
    ], 
    extensions: ['', '.js', '.json', '.scss', '.html', '.css', '.vue'], 
    alias: { 
     'vue': 'vue/dist/vue.js' 
    } 
}, 

नीचे मेरी .vue फ़ाइल है: नीचे मेरी webpack config है। क्या किसी को भी एक ही समस्या है?

Answer 1

मैं अपने webpack config है, जो मेरे लिए काम करता में निम्नलिखित है:

module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue', 
     options: vueConfig 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'url', 
     options: { 
      limit: 10000, 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    } 

मैं जो मैं किसी भी विशिष्ट सेटिंग के बिना पहुँच सकते हैं और प्रदर्शन कर सकते हैं src/assets फ़ोल्डर में छवियों की है।

Answer 2

मैं अपने webpack उपनाम के भीतर अपने स्थिर img निर्देशिका के लिए उपनाम जोड़ना चाहते हैं, यानी

resolve: { 
    ... 
    alias: { 
    'vue': 'vue/dist/vue.js', 
    'img': path.resolve(__dirname, '../web/img') // or wherever it is located relative to this file 
    } 
} 

अब आप ~img के माध्यम से स्थिर चित्र संदर्भ, यानी सकते हैं

<img src="~img/sieleLogo@1x.png" srcset="~img/sieleLogo@2x.png" /> 

---

सुनिश्चित करने के लिए आप उपरोक्त को अपने एचटीएमएल में पार्स कर सकते हैं आपको vue-html लोडर को अपनी वेबपैक कॉन्फ़िगरेशन में जोड़ने की आवश्यकता है:

module: { 
    loaders: [ 
    ... 
    { 
     test: /\.html$/, 
     loaders: 'vue-html' 
    } 

मैं उपरोक्त के साथ अपने वर्तमान एचटीएमएल लोडर को प्रतिस्थापित कर दूंगा।

हालांकि यह सब एक तरफ - एक ठोस webpack Vue आवेदन मचान के जटिलता के कारण मैं strongely आप स्थापित की सलाह देते हैं Vue-CLI: https://github.com/vuejs/vue-cli

तो फिर तुम बस बाहर रोल कर सकते हैं एक परीक्षण किया है और कामकाज webpack पर्यावरण:

https://github.com/vuejs-templates/webpack

आप इसे में अपने आवेदन की प्रतिलिपि बनाएँ। आपको शायद थोड़ा सा रिफैक्टरिंग करना पड़ेगा लेकिन सेट अप पर समय बचाने के लायक है।