构建产品不显示字体 - 基本的 webpack init

Question

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

npm run build

对于这个测试，我只用这个命令初始化项目：

vue init webpack myProjectName

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

So, font seems to be display in dev and not in production.

这是我的树项目：

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 原生于 init。我的 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)
}

但为什么呢？

Check this two similar issues..

Vuejs forum similar issue
Github similar issue

构建后，我可以检查 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。

现在可以使用了！

构建产品不显示字体 - 基本的 webpack init

Build prod don’t display font - basic webpack init

css

fonts

production

webpack

vue.js