Vue@font-face 引用的字体路径问题

Question

再vue component的style中定义@font-face 的src引用的资源会出现路径的问题，build之后，字体资源路径会相对于static/css/目录，而我希望它相对于dist/目录

我的项目目录结构
<pre>
dist/
| static/
| | css/
| | fonts/
| | | FZY3JW.3b9060e.ttf
| | js/
| index.html
src
| assets/
| | FZY3JW.ttf
| app.vue
</pre>
这是字体的引用

npm run dev没有问题，引用可以访问

但是打包之后（npm run build）访问index.html会报错

webpack中增加了字体的loader

Answer 1

参考这个回答
单独提取出来的 css 中的相对路径道理相同。