时间戳

首页 > 解决方案 > 构建产品不显示字体 - 基本的 webpack 初始化

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

问题描述

启动此命令后，我需要在生产环境中的 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>

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 不能正确显示我的字体？感谢帮助我解决这个字体问题。

标签： cssvue.jswebpackfontsproduction

解决方案

好吧没有回应？没有人...

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

在 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 论坛类似问题
Github 类似问题

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

它现在工作！

推荐阅读