Question

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

npm run build

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

vue init webpack myProjectName

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

因此，字体似乎是在dev中显示的，而不是在生产中显示的。

这是我的树项目：

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>

Webpack是initi的天才。我的webpack.base.conf.js中有这个加载器：

{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
}

对于构建配置：

build{
  build.assetsPublicPath: ‘/’
}

那么，怎么了？为什么prod env无法正确显示我的字体？感谢您帮助我解决此字体问题。

Answer 1

好吗？没人...

最后，这是我的解决方法。

在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)
}

但是为什么？

检查这两个类似的问题。

Vuejs forum similar issue
  Github similar issue

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

/dist/src/static/css/

...，并指出根据ma dist树文件夹构建后，我的@ font-face源具有错误的路径：

@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。

现在可以使用！

构建产品不显示字体-基本的webpack初始化

1 个答案: