Vue+Inertia+Laravel SPA引入外部JS仅首次加载生效如何解决

你遇到的失效问题本质来自两个核心原因：

1. Inertia属于SPA应用模式，router-link跳转不会触发整页刷新，仅替换页面内的DOM内容。你引入的外部模板JS通常是在页面加载完成后自执行一次，只会绑定首次加载的DOM节点，跳转后新渲染的DOM没有被JS重新初始化绑定逻辑
2. 你之前尝试的两种方案都无效是因为：浏览器对同路径的JS资源有缓存机制，重复插入相同src的script标签不会触发JS重新执行，等于没加新逻辑

方案一（推荐）：手动调用外部JS的初始化方法 #

大部分前端模板的JS都会对外暴露全局初始化方法，你可以先查看/dist/js/app.js的源码，找到类似initTemplate()、renderComponents()这类全局挂载的初始化函数，之后在你项目的全局JS（/resources/js/app.js）中监听Inertia的导航完成事件，每次跳转后重新执行初始化即可，不需要重复加载JS：

// 在你的Inertia初始化逻辑中新增以下代码
document.addEventListener('inertia:navigated', () => {
  // 替换为你外部JS实际暴露的初始化方法名
  if (window.templateInit) {
    window.templateInit()
  }
})

该方案性能最优，也不会出现事件重复绑定的问题。

方案二：强制每次跳转重新加载JS #

如果外部JS是完全自执行的，没有暴露任何可调用的初始化方法，可以用给JS路径加动态时间戳的方式跳过浏览器缓存，每次跳转都重新加载执行JS：
首先删除blade文件中引入/dist/js/app.js的script标签，之后在全局公共布局组件中添加以下逻辑：

<script setup>
import { onMounted, onUnmounted } from 'vue'

const reloadExternalJs = () => {
  // 先移除旧的JS标签
  const oldScript = document.getElementById('external-template-js')
  if (oldScript) oldScript.remove()
  // 插入带时间戳的新JS标签，强制浏览器重新加载
  const newScript = document.createElement('script')
  newScript.id = 'external-template-js'
  newScript.src = `/dist/js/app.js?t=${Date.now()}`
  newScript.defer = true
  document.head.appendChild(newScript)
}

onMounted(() => {
  reloadExternalJs()
  document.addEventListener('inertia:navigated', reloadExternalJs)
})

onUnmounted(() => {
  document.removeEventListener('inertia:navigated', reloadExternalJs)
})
</script>

注意：该方案每次跳转都会重新加载JS，性能略差，同时如果外部JS有绑定全局事件，需要先修改外部JS逻辑，在初始化前解绑旧事件，避免出现事件触发多次的问题。

• 如果条件允许，建议把外部JS的代码复制到项目自有JS文件中，改写为可手动调用的初始化函数，长期维护更稳定
• 不要在blade文件和Vue组件中同时引入同一个外部JS，避免重复执行逻辑报错

内容的提问来源于stack exchange，提问作者Wailan Tirajoh