vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作
更改 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)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js數(shù)據(jù)綁定之data屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue+tp5實(shí)現(xiàn)簡(jiǎn)單登錄功能
這篇文章主要為大家詳細(xì)介紹了vue+tp5實(shí)現(xiàn)簡(jiǎn)單登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vite多環(huán)境配置項(xiàng)目高定制化能力詳解
這篇文章主要為大家介紹了Vite多環(huán)境配置項(xiàng)目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
axios是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了關(guān)于vue.js簡(jiǎn)單配置axios的相關(guān)資料，需要的朋友們可以參考借鑒，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后清除緩存的相關(guān)資料,這個(gè)問題在我們?nèi)粘９ぷ髦薪?jīng)常會(huì)用到,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
vue2之jessibuca視頻插件使用教程詳細(xì)講解
Jessibuca進(jìn)行直播流播放,為用戶帶來便捷、高效的視頻觀看體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue2之jessibuca視頻插件使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的相關(guān)資料,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)解析了Vue監(jiān)聽數(shù)組變化的源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
本篇文章主要介紹了Vue 換膚的示例實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01