मुझे इस आदेश को लॉन्च करने के बाद उत्पादन वातावरण में ttf फ़ाइल से 'myFontName' नाम के फ़ॉन्ट का उपयोग करने की आवश्यकता है:

npm run build

इस परीक्षण के लिए, मैंने केवल इस आदेश के साथ प्रोजेक्ट प्रारंभ किया है:

vue init webpack myProjectName

देव पर्यावरण में (एनपीएम रन देव) मैं अपने फ़ॉन्ट को प्रदर्शित और उपयोग कर सकता हूं। लेकिन मैं निर्माण के बाद एक ही फ़ॉन्ट नहीं देख सकता। हालांकि, उत्पादन वातावरण में मैं सीएसएस नियमों (ब्राउज़र कंसोल) में अपना फ़ॉन्ट देख सकता हूं।

तो, फ़ॉन्ट देव में प्रदर्शित होता है न कि उत्पादन में।

यह मेरा ट्री प्रोजेक्ट है:

src
|_assets
|_components
   |componentfile.vue
   |_fonts
      |_myFontFile.ttf

यह मेरा डिस्टर्ब फोल्डर ट्री है:

dist
|_js
|_static
   |_fonts
      |_myFontFile.ttf

मैं अपने फॉन्ट को सीधे अपने कंपोनेंट.vue फाइल में कॉल करता हूं:

<script scoped>
@font-face{
font-family:"myFontName";
src: url("./fonts/myFontFile.ttf") format("truetype");
}
<script> 

वेबपैक init से मूल है। मेरे पास यह लोडर मेरे webpack.base.conf.js में है:

{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
} 

बिल्ड कॉन्फ़िगरेशन के लिए:

build{
  build.assetsPublicPath: ‘/’
}

तो क्या गलत हुआ ? क्यों prod env मेरा फ़ॉन्ट सही ढंग से प्रदर्शित नहीं करता है? इस फ़ॉन्ट समस्या को हल करने में मेरी मदद करने के लिए धन्यवाद।

1
Gaetan bruel 7 मई 2019, 15:16

1 उत्तर

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

ठीक है कोई प्रतिक्रिया नहीं? कोई भी नहीं...

अंत में, यहाँ मेरा समाधान है।

Util.js फ़ाइल में, सम्मिलित करें:

publicPath: '../../'

कोड के इस भाग में

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

लेकिन क्यों ?

इस दो समान मुद्दों की जाँच करें ..

Vuejs फ़ोरम समान समस्या
Github समान समस्या

निर्माण के बाद, मैं स्टाइल सीएसएस फाइलों का निरीक्षण कर सकता हूं

/dist/src/static/css/

... और ध्यान दिया कि मेरे @ फ़ॉन्ट-फेस स्रोत में ma dist tree फ़ोल्डर के अनुसार निर्माण के बाद गलत पथ है:

@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format("truetype")}

url(static/fonts/myFontFileBis.ttf) के बजाय, मुझे url(../../static/fonts/myFontFileBis.ttf) प्राप्त करने की आवश्यकता है।

इसलिए, मुझे publicPath को util.js में सेट करने की आवश्यकता है।

यह अब काम करता है!

1
Gaetan bruel 7 मई 2019, 22:35