Nuxt.js中用<link>预加载字体：app.html访问assets文件夹遇404

直接用~/assets/fonts/...路径会404，是因为app.html作为根模板文件，不识别Nuxt的~路径别名，而且直接写静态路径会因为webpack编译后资源带哈希值而失效。试试下面的方法：

• 用模板语法结合webpack require获取编译后路径
  在app.html里这样写预加载标签：

  <link rel="preload" href="<%= require('~/assets/fonts/your-font-file.woff2') %>" as="font" type="font/woff2" crossorigin>
  

  注意事项：

  • 替换your-font-file.woff2为你实际的字体文件名
  • 必须加上crossorigin属性，否则浏览器可能会重复加载字体
  • 如果之前require无效，检查字体文件是否被webpack正确处理：确保nuxt.config.js的build配置里有处理字体的规则（没有的话就加上）：

    // nuxt.config.js
    export default {
      build: {
        extend(config) {
          config.module.rules.push({
            test: /\.(woff2?|eot|ttf|otf)$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'assets/fonts/[name].[hash:7].[ext]'
            }
          })
        }
      }
    }
    

• 兜底方案：把字体移到static目录
  要是不想配置webpack，直接把字体文件从assets/fonts移到static/fonts，然后在app.html里写绝对路径：

  <link rel="preload" href="/fonts/your-font-file.woff2" as="font" type="font/woff2" crossorigin>
  

  这种方式不需要webpack处理，适合不需要哈希缓存的场景。

内容的提问来源于stack exchange，提问作者M -