vue-cli3 配合 webpack 打包后找不到图片及字体问题？

在使用 Vue-cli3 配合 Webpack 打包 Vue 项目时，有时候我们可能会遇到找不到图片及字体的问题。这个问题困扰了很多小伙伴，本文将会详细讲解这个问题出现的原因及解决方案。

问题出现的原因

在 Vue-cli3 中，Webpack 会将项目中的资源打包成一些哈希值，方便浏览器缓存和版本更新。例如，一个图片资源可能会被转化成以下地址：

<img src="/img/logo.3ebdfe3.png" alt="">

但在我们使用了一些第三方库或者自己手写的组件中调用这些静态资源时，可能没有正确使用 Webpack 生成的路径导致找不到文件。

解决方案

Vue-cli3 默认会将静态资源打包到 public 目录下的 img 和 fonts 文件夹中。我们可以将项目中的 public 目录下的资源路径替换成 Webpack 生成的哈希值路径，从而解决这个问题。

在 Vue 组件中调用图片资源时，可以将路径写成以下形式：

<template>
  <div>
    <img :src="require('@/assets/logo.png')"/>
  </div>
</template>

在引入字体时，需要在 css 文件中使用 @font-face 规则，然后在 Vue 组件中引用这个字体文件：

/* 指定字体文件和字体名称 */
@font-face {
    font-family: 'myFont';
    src: url('~@/assets/fonts/MyFont.woff2') format('woff2'),
         url('~@/assets/fonts/MyFont.woff') format('woff');
}

/* 使用该字体 */
.myClass {
    font-family: 'myFont';
}

<template>
  <div class="myClass">
    使用自己的字体
  </div>
</template>

这样，就可以成功解决打包后找不到图片及字体的问题了。

示例代码

<template>
  <div>
    <h1>使用图片资源</h1>
    <img :src="require('@/assets/logo.png')"/>
    <h1>使用自己的字体</h1>
    <p class="myClass">Hello Vue3.js</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {

    }
  }
}
</script>

<style>
/* 指定字体文件和字体名称 */
@font-face {
    font-family: 'myFont';
    src: url('~@/assets/fonts/MyFont.woff2') format('woff2'),
         url('~@/assets/fonts/MyFont.woff') format('woff');
}

/* 使用该字体 */
.myClass {
    font-family: 'myFont';
    font-size: 48px;
    color: red;
}
</style>

总结

在使用 Vue-cli3 配合 Webpack 打包 Vue 项目时，我们可能会遇到找不到图片及字体的问题。这个问题的出现原因是，Webpack 会将静态资源打包成一些哈希值，需要在组件中正确使用 Webpack 生成的路径。通过引入 require 和使用 @font-face 规则，我们可以解决这个问题，让静态资源得到正确引用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594d7deeb4cecbf2d91be66