Vue组件提示jquery not defined，引入AdminLTE的Datatables失败如何解决？

问题原因 #

你遇到的$ is not defined报错，以及直接导入public目录下jQuery文件无效的核心原因有两个：

1. public目录下的静态资源不会被构建工具作为模块解析，直接导入jQuery的js文件无法正常导出$对象
2. 你当前将DataTables初始化代码写在created生命周期中，此时组件DOM还未渲染，即使$正常引入也无法找到#myTable元素完成初始化

方案1：沿用你已在index.html引入jQuery的逻辑 #

• 先调整index.html中资源引入顺序：jQuery放在最前面，之后依次引入DataTables、AdminLTE相关脚本，最后引入Vue项目的入口打包脚本
• 在项目构建配置文件中声明jQuery为全局外部变量，避免构建工具检测未定义报错：
  • 如果是Vue CLI搭建的项目，修改vue.config.js：

  module.exports = {
    configureWebpack: {
      externals: {
        jquery: 'jQuery'
      }
    }
  }
  

  • 如果是Vite搭建的项目，先安装vite-plugin-externals依赖，再修改vite.config.js：

  import { viteExternalsPlugin } from 'vite-plugin-externals'
  export default {
    plugins: [
      viteExternalsPlugin({
        jquery: 'jQuery'
      })
    ]
  }
  

• 配置完成后在组件内直接用import $ from 'jquery'引入即可正常使用

方案2：通过NPM安装依赖（更稳定，规避全局引入顺序问题） #

• 执行命令安装相关依赖：
  npm install jquery datatables.net datatables.net-bs4
• 在需要使用DataTables的组件顶部导入依赖：

import $ from 'jquery'
import 'datatables.net'
// 对应AdminLTE的bootstrap样式，可根据你使用的AdminLTE版本调整对应的css包
import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css'

修正组件初始化代码 #

不管使用哪种方案，都需要将初始化代码从created生命周期迁移到mounted生命周期，且不需要额外套$(document).ready()，mounted阶段DOM已经完成挂载，可直接操作元素：

import $ from 'jquery'
export default {
  mounted() {
    $.noConflict();
    $('#myTable').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": "api/student/list",
      "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "fatherName" },
        { "data": "rollNo" },
        { "data": "class" },
      ]
    });
  }
}

内容的提问来源于stack exchange，提问作者Paul Iverson Cortez