Vue3实现全局公共函数的完整方案(创建、挂载、引用、使用)

src/
├── utils/             【工具函数根目录】
│   ├── index.js       【主入口：统一导出所有函数】
│   ├── olUtils.js     【分文件：OpenLayers地图专用工具】
│   ├── format.js      【分文件：格式化工具】
│   └── filter.js      【分文件：数据过滤工具】
├── main.js            【全局注册入口】
└── src/xxx.vue        业务页面

// OpenLayers SVG 图标生成
export function getSvgMarker(color = '#ff4400') {
  return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="${color}" stroke="#fff" stroke-width="5"/>
  </svg>`.replace(/\s+/g, '')
}
// 坐标转换
export function wgs84ToMercator(lon, lat) {
  return import.meta.env.VITE_APP_PROJECTION === 'EPSG:3857'
    ? [lon, lat]
    : fromLonLat([lon, lat])
}

// 根据配置 isShow 过滤对象字段
export function filterByShowConfig(data, config) {
  const result = {}
  for (const key in data) {
    if (config[key] && config[key].isShow === true) {
      result[key] = data[key]
    }
  }
  return result
}

// 统一导出所有工具函数
export * from './olUtils'
export * from './filter'

import { createApp } from 'vue'
import App from './App.vue'
import * as $utils from './utils/index'  // 引入

const app = createApp(App)

app.config.globalProperties.$utils = $utils  // 全局挂载

app.mount('#app')

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@utils': path.resolve(__dirname, 'src/utils')
    }
  }
})

import { getSvgMarker } from '@utils'

<script setup>
// 直接导入需要的函数
import { getSvgMarker, filterByShowConfig } from '@utils'

// 使用 SVG
const marker = getSvgMarker('blue')

// 使用数据过滤
const A = {}
const B = {}
const filteredData = filterByShowConfig(A, B)
</script>

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

// 直接使用全局函数
const icon = proxy.$utils.getSvgMarker('red')
const result = proxy.$utils.filterByShowConfig(A, B)
</script>

<script>
export default {
  mounted() {
    const icon = this.$utils.getSvgMarker('green')
  }
}
</script>

import { fromLonLat } from 'ol/proj'

// SVG 地图标点
export function getSvgIcon(color = '#ff4400') {
  return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="14" fill="${color}" stroke="#fff" stroke-width="2"/></svg>`
}

// 坐标转墨卡托
export function toMercator(lon, lat) {
  return fromLonLat([Number(lon), Number(lat)])
}

export function filterByConfig(data, config) {
  let res = {}
  for (let k in data) {
    if (config[k]?.isShow) res[k] = data[k]
  }
  return res
}

export * from './olUtils'
export * from './filter'

import * as $utils from './utils'
app.config.globalProperties.$utils = $utils

<script setup>
import { getSvgIcon, filterByConfig } from '@utils'

// 地图图标
const icon = getSvgIcon('#0088ff')

// 数据过滤
const filtered = filterByConfig(A, B)
</script>