Vue + Vite
在纯 Vue + Vite 项目中经 @movk/mapbox/vite 与 vue-plugin 使用同一套组件。
Vite 插件
在 vite.config.ts 中加入插件，负责组件与 composables 的自动导入：
vite.config.ts
import vue from '@vitejs/plugin-vue'
import Mapbox from '@movk/mapbox/vite'
export default defineConfig({
plugins: [vue(), Mapbox()]
})
Mapbox() 内部自动注册组件解析器与自动导入项，独立 Vue + Vite 项目直接使用即可。
复用已有 unplugin 实例
部分库（如 @nuxt/ui）的 Vite 插件内置了唯一的 unplugin-vue-components / unplugin-auto-import 实例。这时无需再加 Mapbox()，改用 @movk/mapbox/unplugin 导出的 mapboxComponentResolver 与 mapboxAutoImports，注入宿主插件复用：
vite.config.ts
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
import { mapboxAutoImports, mapboxComponentResolver } from '@movk/mapbox/unplugin'
export default defineConfig({
plugins: [
vue(),
ui({
components: { resolvers: [mapboxComponentResolver()] },
autoImport: { imports: [...mapboxAutoImports()] }
})
]
})
@nuxt/ui 检测到第二个 unplugin-vue-components / unplugin-auto-import 实例会直接抛错，因此与其同用时务必走注入复用方式，而非再叠加 Mapbox()。mapboxComponentResolver 默认以 Mapbox 为组件前缀，可通过 mapboxComponentResolver({ prefix: 'Mb' }) 自定义。
注册 Vue 插件
在入口注册 vue-plugin，传入 token 并引入运行时样式：
main.ts
import { createApp } from 'vue'
import MapboxPlugin from '@movk/mapbox/vue-plugin'
import '@movk/mapbox/index.css'
import App from './App.vue'
createApp(App)
.use(MapboxPlugin, {
accessToken: import.meta.env.VITE_MAPBOX_TOKEN,
tiandituToken: import.meta.env.VITE_TIANDITU_TOKEN
})
.mount('#app')
配套 .env：
.env
VITE_MAPBOX_TOKEN=pk.your_mapbox_access_token
VITE_TIANDITU_TOKEN=your_tianditu_tk
用法一致
组件与 composables 由 @movk/mapbox/vite 自动导入，用法与 Nuxt 完全一致：
App.vue
<script setup lang="ts">
const center = ref<[number, number]>([116.397, 39.908])
</script>
<template>
<div style="height: 480px">
<MapboxMap v-model:center="center" :options="{ style: 'mapbox://styles/mapbox/streets-v12', zoom: 9 }">
<MapboxNavigationControl position="top-right" />
</MapboxMap>
</div>
</template>