iT邦幫忙

1

想請問Vue-cli +webpack匯入字型ttf檔錯誤問題

想請問各位大大,小弟目前需要自行載入網頁字體,但是為什麼一直說找不到字型檔?路徑有問題嗎?

專案架構

https://ithelp.ithome.com.tw/upload/images/20191111/20109533niUehhQIPo.jpg

https://ithelp.ithome.com.tw/upload/images/20191111/20109533gdfLN7wTpS.jpg
這是CSS

@font-face {
  font-family: 'Cems';
  src: url('./src/font/ALBA.ttf')format('truetype');
}

webpack設定

  {
        test: /\.(woff2?|eot|ttf|otf)$/,
        use: {
            loader:'url-loader',
            options: {
              name: '[name].[ext]?[hash]'
           }
        }
      }

錯誤訊息

ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1163bbbd","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/NewsDetail.vue
Module not found: Error: Can't resolve './src/font/ALBA.ttf' in 'C:\Users\admin\Desktop\VueProject\CEMS\src'
@ ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1163bbbd","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/NewsDetail.vue 7:691-721
@ ./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1163bbbd","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/NewsDetail.vue
@ ./src/NewsDetail.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

看更多先前的討論...收起先前的討論...
sion iT邦新手 4 級 ‧ 2019-11-11 16:50:04 檢舉
src: url('./font/ALBA.ttf')format('truetype');
改這樣試試吧
還是一樣的錯誤@@
sion iT邦新手 4 級 ‧ 2019-11-11 18:10:16 檢舉
那應該是你soure的url()
你去查一下如何在url()中放server的資料夾路徑吧
已解決了,路徑問題.. 謝謝!

2 個回答

1
dragonH
iT邦大師 1 級 ‧ 2019-11-12 09:32:09
最佳解答
@font-face {
  font-family: 'Cems';
  src: url('font/ALBA.ttf')format('truetype');
}

這樣試試

我在 vue cli3 試是成功的

cli 2 我就不確定了 /images/emoticon/emoticon11.gif

cli2 也實測成功

webpack 皆為預設的

@font-face {
  font-family: 'Cems';
  src: url('./font/ALBA____.ttf')format('truetype');
}

image

謝謝大大,目前解決了

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-11-11 23:05:07

不行的話,先試試絕對路徑是否可以用。
不一定要用相對路徑的。

目前已解決,謝謝!

我要發表回答

立即登入回答