原因
我在控制臺查看請求后，發(fā)現(xiàn)elementUI的字體文件請求路徑不對降狠，
我的路徑是/static/css/static/fonts/element-icons.535877f.woff，
正確的是/static/fonts/element-icons.535877f.woff
解決
build - utils
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// 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)
}
}
進(jìn)一步說明：
同樣的代碼環(huán)境旧巾，用yarn來安裝依賴后啟動(dòng)運(yùn)行正常祥山，而采用npm安裝依賴則有類似問題。當(dāng)然剥扣，這個(gè)和yarn或者npm沒有關(guān)系，肯定是環(huán)境配置的問題铝穷。經(jīng)過對比發(fā)現(xiàn)钠怯，用yarn安裝依賴后，運(yùn)行的頁面加載的字體文件并不是一個(gè)http請求曙聂，而是把字體文件打包成了Base64編碼的文件直接嵌入到了頁面當(dāng)中晦炊，而采用npm搭建的環(huán)境，則發(fā)起了一個(gè)http請求宁脊，并指向了錯(cuò)誤的地址断国。
這樣以來就初步定位了問題，排查webpack.base.conf.js榆苞，對應(yīng)的字體模塊加載配置
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[ext]')
}
}
由于設(shè)置了limit:10000稳衬，即文件大于10KB就會(huì)直接發(fā)起http請求的方式去加載依賴，而小于10KB的文件則直接通過Base64打包嵌入到頁面當(dāng)中坐漏，調(diào)整該配置為100000薄疚，再次打包測試弄砍，字體圖標(biāo)顯示正常了，初步確定输涕，問題就在這里。
另一個(gè)問題被發(fā)現(xiàn)慨畸，element-ui的版本問題莱坎，npm安裝搭建的環(huán)境，請求的woff文件和ttf文件寸士，顯著變大了檐什，分別為55956B和28200B，而通過yarn搭建的環(huán)境請求的對應(yīng)字體文件只有11040B和6164B弱卡，文件大小明顯不同乃正，差異巨大。
這么一來婶博，初步確定了是版本問題瓮具，導(dǎo)致了加載對應(yīng)的字體文件不同，進(jìn)一步導(dǎo)致了字體文件沒有符合配置要求凡人，沒有被打包編譯為Base64編碼文件嵌入到頁面導(dǎo)致名党。經(jīng)過進(jìn)一步確認(rèn)，node_modules文件夾中的element-ui目錄中挠轴，真實(shí)的element-ui版本為2.12.0传睹，而package.json中對應(yīng)的目標(biāo)版本為2.4.9，這導(dǎo)致了加載的字體文件不一致岸晦，引起了這個(gè)問題欧啤。
package.json中對應(yīng)的版本標(biāo)識為 “element-ui”: “^2.4.9”, 就是這個(gè) ^ 符號，鎖定了element-ui的版本范圍為2.4.9 ~ 3.0.0启上，即只要是小于3.0.0的版本邢隧，都允許自動(dòng)升級。這一切還是版本不匹配挖出來的大坑冈在。
另外牽涉到 assetsSubDirectory 和 assetsPublicPath 配置府框，真正的靜態(tài)文件的請求地址，其實(shí)是assetsPublicPath + assetsSubDirectory 再加上對應(yīng)的webpack.base.conf.js中配置filename等字段指定的文件名稱讥邻，路徑等迫靖。
