Vue引入static目錄下的文件

一、static目錄的作用

在Vue項目中，我們經常可以看到static目錄的存在。那這個目錄有什麼作用呢？其實，static目錄主要用於存放一些不需要經過webpack處理的靜態資源文件，例如圖片、音頻、視頻等。這些文件可以直接在組件中引用。因此，我們可以把一些非常基礎和通用的文件直接放在static目錄下，方便統一管理和引用。

二、引入圖片文件

在前端開發中，經常需要使用到圖片資源。在Vue中，可以直接在模板中使用img標籤引用靜態圖片文件。如果想引用static目錄下的圖片，只需要在src屬性中指定static目錄下的相對路徑即可。如下面的代碼示例：

<template>
  <div>
    <img src="~static/images/logo.png" alt="logo">
  </div>
</template>

其中，~符號表示項目根目錄，因此我們可以使用~static表示static目錄。

三、引入音頻和視頻文件

在Vue中，我們可以直接使用

<template>
  <div>
    <audio src="~static/audio/sound.mp3"></audio>
  </div>
</template>

同樣地，我們可以使用

四、引入字體文件

有時候，我們需要在Vue項目中使用自定義字體文件，例如iconfont等。我們可以將字體文件放在static目錄下，並通過CSS樣式引用。下面是一個使用iconfont的示例：

<style>
  @font-face {
    font-family: 'iconfont';
    src: url('~static/fonts/iconfont.eot');
    src: url('~static/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
         url('~static/fonts/iconfont.woff2') format('woff2'),
         url('~static/fonts/iconfont.woff') format('woff'),
         url('~static/fonts/iconfont.ttf') format('truetype'),
         url('~static/fonts/iconfont.svg#iconfont') format('svg');
  }

  .iconfont {
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-home:before {
    content: "\\e608";
  }
</style>
<template>
  <div>
    <i class="iconfont icon-home"></i>
  </div>
</template>

注意：在CSS樣式中的路徑應該採用相對於樣式文件（style標籤或者單獨的CSS文件）的相對路徑來引用字體文件。

五、結語

靜態資源文件是Web開發中的重要組成部分。Vue提供了靈活的靜態資源管理功能，可以讓我們輕鬆地引入和管理不同類型的靜態資源。有了這些功能，我們可以更加高效地進行開發工作，為項目的成功貢獻我們自己的力量。