Vue项目结合Vue-Router正确引入JavaScript文件的方法咨询

你的问题核心在于全局引入的JS插件只会在页面首次加载时初始化DOM元素，而Vue Router切换组件是动态渲染新DOM，这些新元素没有被已加载的JS重新初始化，所以只有刷新页面（重新执行全局JS）才会生效。下面是针对性的解决方案：

一、先调整资源目录结构（建议） #

你提到的src/assets是Vue项目中存放静态资源的标准目录，建议把static/Plugins和static/Public下的CSS、JS文件迁移到src/assets中，这样可以通过Webpack进行模块化管理，避免全局引入的冗余和冲突。

调整后目录示例：

/src
|--> /assets
|   |--> /plugins  # 原static/Plugins内容
|   |--> /css      # 原static/Public/css内容
|--> /components
|--> /router
...

二、组件内按需引入资源并在生命周期中初始化 #

不再在index.html中全局引入所有JS/CSS，而是在需要的组件（比如Afiliacion.vue）中按需引入，并利用Vue的生命周期钩子来控制插件的初始化和销毁。

示例：Afiliacion.vue的改造 #

<template>
  <div class="afiliacion-container">
    <!-- 组件内容，比如需要DataTables的表格 -->
    <table id="afiliacion-table" class="table table-striped"></table>
    <!-- 需要Ion Slider的元素 -->
    <input type="text" id="range-slider">
  </div>
</template>

<script>
// 引入当前组件需要的CSS
import '@/assets/plugins/datatables/css/dataTables.bootstrap4.min.css'
import '@/assets/plugins/ion-rangeslider/css/ion.rangeSlider.min.css'
import '@/assets/css/styleSGB.css'

export default {
  name: 'Afiliacion',
  mounted() {
    // 动态引入需要的JS插件（确保DOM已渲染完成）
    // 初始化DataTables
    import('@/assets/plugins/datatables/js/jquery.dataTables.min.js').then(() => {
      import('@/assets/plugins/datatables/js/dataTables.bootstrap4.min.js').then(() => {
        $('#afiliacion-table').DataTable({
          // 你的表格配置项
          paging: true,
          searching: true
        })
      })
    })

    // 初始化Ion Slider
    import('@/assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js').then(() => {
      $('#range-slider').ionRangeSlider({
        // 你的滑块配置项
        min: 0,
        max: 100,
        step: 5
      })
    })
  },
  beforeUnmount() {
    // 组件卸载前销毁插件，避免内存泄漏
    if ($.fn.DataTable.isDataTable('#afiliacion-table')) {
      $('#afiliacion-table').DataTable().destroy()
    }
    const sliderInstance = $('#range-slider').data('ionRangeSlider')
    if (sliderInstance) sliderInstance.destroy()
  }
}
</script>

三、处理全局依赖（比如jQuery） #

如果多个组件都需要jQuery，可以在main.js中全局引入，避免重复引入：

// main.js
import $ from 'jquery'
window.$ = window.jQuery = $

或者通过Webpack的ProvidePlugin自动注入（在vue.config.js中配置）：

// vue.config.js
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

四、全局通用资源的处理 #

对于全局都需要的CSS（比如AdminLTE的核心样式、Font Awesome），可以在main.js中统一引入：

// main.js
import '@/assets/plugins/fontawesome-free/css/all.min.css'
import '@/assets/plugins/dist/css/adminlte.min.css'
// 其他全局通用样式...

关键原理说明 #

• mounted钩子：组件DOM已经渲染完成，此时初始化JS插件可以确保找到对应的DOM元素。
• 动态import：只有当组件被加载时才会引入对应的JS，减少首屏加载体积。
• beforeUnmount钩子：组件卸载前销毁插件，避免残留的事件监听或DOM元素导致内存泄漏。

额外建议 #

尽量使用Vue生态的封装插件替代原生JS插件，比如用vue-datatable替代jQuery的DataTables，这样可以更好地和Vue的响应式系统结合，避免手动操作DOM的问题。

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