Vite 资源导入

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

常用导入方式

导入后缀	用途	示例
?url	获取资源的处理后URL	import url from './img.png?url'
?raw	获取文件原始内容字符串	import text from './data.txt?raw'
?inline	内联文件内容	import json from './data.json?inline'
?worker	创建Web Worker	import Worker from './worker.js?worker'

URL导入示例

// 导入前
import jsonUrl from './data.json?url'

// 编译后 (大致效果)
const jsonUrl = '/assets/data-f8d34a1e.json'

实际应用场景

<script setup>
// 导入图片URL
import logoUrl from './logo.svg?url'
// 导入JSON数据URL (适用于地图瓦片等)
import tilesJsonUrl from './tiles.json?url'

// 直接使用导入的URL
const imageSource = logoUrl
</script>

<template>
  <!-- 在属性中使用URL -->
  <img :src="logoUrl" alt="Logo">

  <!-- 在组件属性中传递URL -->
  <MapComponent :tiles-url="tilesJsonUrl" />
</template>