vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作

發(fā)布時(shí)間：2020-10-21 13:46:01 來源：腳本之家閱讀：402 作者：cfangling 欄目：開發(fā)技術(shù)

更改 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è)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽