globalProperties全局函數掛載

在vue3項目中，一般使用globalProperties實現全局函數掛載

import { createApp } from "vue";
import "@/style.css";
import App from "@/App.vue";


const app = createApp(App);

// 這裏掛載
app.config.globalProperties.getTestFn = function () { console.log('測試函數') } 

app.mount("#app");

但是globalProperties有一個不方便的地方，那就是每個頁面都要手動導入一次getCurrentInstance才可以調用，如下：

<script setup lang="ts">
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

proxy.getTestFn(); // 調用
</script>

unplugin-auto-import自動按需引入

我們可以使用unplugin-auto-import來實現自動按需引入，關於unplugin-auto-import的使用，可以看文末的vite自定引入api，這裏主要講其中一個配置
在vite.config.ts中配置

    AutoImport({
      // 省略其它...

      // 
      dirs: [
        'src/globals',
      ],
      vueTemplate: true, // 允許在模板中使用自動導入的函數
    }),

dirs是unplugin-auto-import插件的核心配置項之一，用於指定本地目錄路徑。插件會掃描這些目錄下的所有模塊（如 .js、.ts、.vue 文件），並自動導入它們的導出內容（函數、變量、組件等），無需手動編寫import語句。
新建文件夾，路徑與配置一致： src -> globals

// globals/index.ts

export function testFn(path: string, query?: any) {
  console.log('測試函數')
}

然後在項目的任意位置調用

testFn(); // 測試函數

注意：配置完後需要重啓項目，否則調用會找不到該函數報錯

參考文章：
vite自動引入api（按需import）
vue3全局函數-用於全局使用getCurrentInstance