Css 构建产品don’；t显示字体-基本网页包初始化

启动此命令后，我需要在生产环境中使用ttf文件中名为“myFontName”的字体：

npm run build

对于此测试，我仅使用以下命令初始化项目：

vue init webpack myProjectName

在开发环境（npm-run-dev）中，我可以显示和使用我的字体。但是我在构建后看不到相同的字体。但是，在生产环境中，我可以在css规则（浏览器控制台）中看到我的字体

所以，字体似乎显示在开发中，而不是在生产中

这是我的树项目：

src
|_assets
|_components
   |componentfile.vue
   |_fonts
      |_myFontFile.ttf

这是我的dist文件夹树：

dist
|_js
|_static
   |_fonts
      |_myFontFile.ttf

我直接在component.vue文件中调用字体：

<script scoped>
@font-face{
font-family:"myFontName";
src: url("./fonts/myFontFile.ttf") format("truetype");
}
<script> 

对于生成配置：

build{
  build.assetsPublicPath: ‘/’
}

那么，怎么了？为什么prod env不能正确显示我的字体？

---

感谢您帮助我解决此字体问题。

好的，没有响应吗？没有人

最后，这是我的解决方案

在util.js文件中，插入：

publicPath: '../../'

在这部分代码中

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

但是为什么呢

检查这两个类似的问题

构建之后，我可以在中检查样式CSS文件

/dist/src/static/css/

。。。并注意到我的@font-face源在根据ma dist树文件夹生成后有错误的路径：

@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format("truetype")}

我需要获取url（../../static/fonts/myFontFileBis.ttf）而不是url（static/fonts/myFontFileBis.ttf）

因此，我需要在util.js中设置publicPath

现在可以了

@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format("truetype")}