MUKI AI Summary
在 VUE 中使用 <script> 插入 JS 檔案，通常是在 /public/index.html 中直接加入，但這樣無法有效控管使用頁面。可以改用 SFC (single-file components) 在需要的頁面載入外部 JS 檔案。
以 google map api 為例，傳統做法是直接嵌入 <script> 標籤。改進做法是使用 onMounted 函數，動態創建 script 元素，設置 src、defer 和 async 屬性，並附加到 document.head，這樣能更靈活管理載入時機。...
最近碰到一個問題是需要在 VUE 用 <script> 插入 JS 檔案，原本的做法是直接在 /public/index.html 插入即可，但有時候不是每一頁都會用到這個檔案，或是需要更有效地去控管他，所以可以改在 SFC 裡面插入這隻檔案。
在 SFC 載入外部 JS 檔案
以 google map api 為例，用 <script> 是這樣寫：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
然後我們可以改成以下寫法：
onMounted(() => {
const key = ''
const googleMapScript = document.createElement('script')
const googleMapScript = document.createElement('script')
googleMapScript.setAttribute(
'src',
`https://maps.googleapis.com/maps/api/js?key=${key}&callback=initMap`
)
googleMapScript.setAttribute('defer', '')
googleMapScript.setAttribute('async', '')
document.head.appendChild(googleMapScript)
})這樣就可以囉！
歡迎給我點鼓勵，讓我知道你來過 ：）
3
2