vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作
更新時(shí)間：2020年08月28日 08:58:26 作者：cfangling
這篇文章主要介紹了vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置這一部分，根據(jù)目錄結(jié)構(gòu)自由調(diào)整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
補(bǔ)充知識(shí)：webpack打包運(yùn)行vue項(xiàng)目后找不到.ttf及.woff文件，或者路徑報(bào)錯(cuò)
webpack.base.config 文件中 ,有的人可能在utils.js中
修改前：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘, ‘a(chǎn)utoprefixer-loader‘],
fallback: ‘style-loader‘
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘,‘a(chǎn)utoprefixer-loader‘, ‘less-loader‘],
fallback: ‘style-loader‘
}),
},
修改后：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘, ‘a(chǎn)utoprefixer-loader‘],
publicPath:‘../../‘,
fallback: ‘style-loader‘
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘,‘a(chǎn)utoprefixer-loader‘, ‘less-loader‘],
publicPath:‘../../‘,
fallback: ‘style-loader‘
}),
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
針對(duì)ttf/woff結(jié)尾的文件使用url-loader加載的，要尋找到加載樣式的loader改變打包路徑。
就是再加載css的時(shí)候，將publicPath路徑更改為“../../”,也根據(jù)自己的目錄結(jié)構(gòu)自定義。這樣打包后的項(xiàng)目才能找到相對(duì)應(yīng)的應(yīng)用路徑,為什么要這樣改呢，是因?yàn)槲覀兊穆窂揭凑沾虬蟮膶蛹?jí)結(jié)構(gòu)去找，不是按原本項(xiàng)目本身，還有一點(diǎn)相對(duì)路徑有時(shí)候找不到，所以才要改成這種絕對(duì)路徑，在static下再去尋找次。
以上這篇vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文將深入探討 Vue 組件樣式作用域的常見(jiàn)問(wèn)題,并提供多種解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
使用vue2.0創(chuàng)建的項(xiàng)目的步驟方法
這篇文章主要介紹了使用vue2.0創(chuàng)建的項(xiàng)目的步驟方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架，本文通過(guò)實(shí)例給大家介紹了vue入門(mén)教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
本篇文章主要介紹了Vue2.0 多 Tab切換組件的封裝實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
下面小編就為大家分享一篇vue-prop父組件向子組件進(jìn)行傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue?scss后綴文件background-image路徑錯(cuò)誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
單項(xiàng)數(shù)據(jù)流和雙向數(shù)據(jù)綁定的概念，這兩種不是相互沖突的嗎？即然能用v-model雙向數(shù)據(jù)綁定，不應(yīng)該就是雙向數(shù)據(jù)流了嗎？本文就詳細(xì)的介紹一下2022-04-04
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱(chēng)這是Vue的?命周期2022-10-10
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類(lèi)名重新生成類(lèi)名，有效避開(kāi)了css權(quán)重和類(lèi)名重復(fù)的問(wèn)題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12