vue.js - Nuxt.js - 字体在生产中预加载

Question

在开发过程中一切都很好——预加载有字体、图像、脚本。但是当我构建生产时，字体不会进入预加载。除了字体什么都有。

render: {
    http2: {
        push: true,
        pushAssets: (req, res, publicPath, preloadFiles) => console.log(preloadFiles)
    }
}

开发中的输出 ( nuxt )

[         
  {
    file: 'runtime.js',
    extension: 'js',
    fileWithoutQuery: 'runtime.js',
    asType: 'script'
  },
  {
    file: 'vendors.app.js',
    extension: 'js',
    fileWithoutQuery: 'vendors.app.js',
    asType: 'script'
  },
  {
    file: 'app.js',
    extension: 'js',
    fileWithoutQuery: 'app.js',
    asType: 'script'
  },
  {
    file: 'assets/fonts/Play.woff',
    extension: 'woff',
    fileWithoutQuery: 'assets/fonts/Play.woff',
    asType: 'font'
  },
  {
    file: 'assets/fonts/Play.woff2',
    extension: 'woff2',
    fileWithoutQuery: 'assets/fonts/Play.woff2',
    asType: 'font'
  },
  {
    file: 'pages/index.js',
    extension: 'js',
    fileWithoutQuery: 'pages/index.js',
    asType: 'script'
  },
  {
    file: 'assets/images/logo.svg',
    extension: 'svg',
    fileWithoutQuery: 'assets/images/logo.svg',
    asType: 'image'
  },
]

生产中的输出 ( nuxt build; nuxt start ):

[   
  {
    file: '5e0bcb963558b2151b59.js',
    extension: 'js',
    fileWithoutQuery: '5e0bcb963558b2151b59.js',
    asType: 'script'
  },
  {
    file: 'a8df7e6ca1b41b6ba1f3.js',
    extension: 'js',
    fileWithoutQuery: 'a8df7e6ca1b41b6ba1f3.js',
    asType: 'script'
  },
  {
    file: 'da6509a7baaff1386039.js',
    extension: 'js',
    fileWithoutQuery: 'da6509a7baaff1386039.js',
    asType: 'script'
  },
  {
    file: '834b4e9b65d7391ff800.js',
    extension: 'js',
    fileWithoutQuery: '834b4e9b65d7391ff800.js',
    asType: 'script'
  },
  {
    file: 'img/0b5b752.svg',
    extension: 'svg',
    fileWithoutQuery: 'img/0b5b752.svg',
    asType: 'image'
  },
]

我想不通。也许有人遇到过这样的问题？如何决定？

我不得不写这篇文字，因为我不能发布这么多代码，我不知道还能说什么。对不起这样的作弊

UPD:最小复制的 repo https://github.com/NomNes/nuxtjs-fonts-preload-bug.git

Answer 1

那是 vue/nuxt 中的一个错误。如果字体在全局 css 中，则不会包含在 preloadFiles 中。

这是一个可以修复它的 PR -> https://github.com/nuxt/nuxt.js/pull/5436

这里是 vue 中的 PR -> https://github.com/vuejs/vue/pull/9802