能否在Vue3挂载区域中使用外部JavaScript脚本？

当Vue3挂载到#app元素后，会完全接管该节点下的DOM渲染流程。你的photo-slider.js在Vue挂载前执行并初始化了.photo-slider元素，但Vue挂载时会重新生成该DOM节点，导致原脚本绑定的事件或初始化状态丢失，最终脚本停止工作。以下是可行的解决方法：

方法1：在Vue生命周期钩子中初始化脚本 #

将外部脚本的初始化逻辑放到Vue组件的mounted钩子中，确保Vue渲染完DOM后再执行脚本：

<template>
  <div class="photo-slider"></div>
</template>

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

onMounted(() => {
  // 调用外部脚本暴露的初始化方法（示例：若脚本提供initSlider函数）
  window.initSlider()
  
  // 若脚本是自动执行类型，可手动获取DOM元素重新触发初始化
  const sliderEl = document.querySelector('.photo-slider')
  // 根据脚本逻辑完成初始化，比如：new PhotoSlider(sliderEl)
})
</script>

注意：需确保外部脚本的初始化逻辑支持手动调用或重复执行。

方法2：让Vue忽略目标元素并调整脚本加载顺序 #

给.photo-slider添加v-pre指令，让Vue跳过对该元素的编译和渲染，保留原始DOM结构：

<div id="app">
  <div class="photo-slider" v-pre></div>
</div>

同时调整脚本加载顺序，确保photo-slider.js在Vue挂载后执行：

<script src="/resources/js/app.js"></script>
<script src="/js/photo-slider.js" defer></script>

方法3：封装为Vue自定义指令 #

将外部脚本封装成Vue自定义指令，方便在组件中复用：

// 在app.js中注册自定义指令
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('photo-slider', {
  mounted(el) {
    // el为指令绑定的DOM元素，在此执行滑块初始化逻辑
    initSlider(el) // 替换为实际的脚本初始化方法
  }
})

app.mount('#app')

在模板中使用指令：

<div v-photo-slider></div>

额外注意事项 #

• 若外部脚本是本地文件，在Laravel+Vite环境下可直接导入到Vue项目中，通过Vite打包避免全局脚本的加载顺序问题：

  // 在app.js中导入
  import '/js/photo-slider.js'
  

• 确保外部脚本没有依赖DOM加载完成的自动执行逻辑，或支持手动触发初始化。

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