---
title: "Vite 资源导入"
description: "Vite 提供了多种灵活的静态资源导入方式，无需手动管理文件路径。"
canonical_url: "https://mhaibaraai.cn/docs/vue/resources-import"
---
# Vite 资源导入

> Vite 提供了多种灵活的静态资源导入方式，无需手动管理文件路径。

## 常用导入方式

<table>
<thead>
  <tr>
    <th>
      导入后缀
    </th>
    
    <th>
      用途
    </th>
    
    <th>
      示例
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        ?url
      </code>
    </td>
    
    <td>
      获取资源处理后的 URL
    </td>
    
    <td>
      <code>
        import url from './img.png?url'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ?raw
      </code>
    </td>
    
    <td>
      获取文件原始内容字符串
    </td>
    
    <td>
      <code>
        import text from './data.txt?raw'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ?inline
      </code>
    </td>
    
    <td>
      将文件内容内联为 base64
    </td>
    
    <td>
      <code>
        import json from './data.json?inline'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ?worker
      </code>
    </td>
    
    <td>
      创建一个新的 Web Worker
    </td>
    
    <td>
      <code>
        import Worker from './worker.js?worker'
      </code>
    </td>
  </tr>
</tbody>
</table>

## 应用场景

下面的示例展示了如何在 Vue 组件中利用 `?url` 后缀导入静态资源 URL。

```vue [Component.vue]
<script setup lang="ts">
// 导入图片 URL
import logoUrl from './logo.svg?url'
// 导入 JSON 数据 URL，适用于地图瓦片等场景
import tilesJsonUrl from './tiles.json?url'

const imageSource = logoUrl
</script>

<template>
  <!-- 在模板属性中使用导入的 URL -->
  <img :src="imageSource" alt="Logo">
  <!-- 将 URL 作为属性传递给子组件 -->
  <MapComponent :tiles-url="tilesJsonUrl" />
</template>
```


## Sitemap

See the full [sitemap](https://mhaibaraai.cn/sitemap.md) for all pages.