Vue 3项目引入AdminLTE外部JS文件时出现404错误的问题求助

问题描述 #

我在Vue项目的App.vue中通过动态创建<script>标签的方式加载AdminLTE模板的JS文件，代码如下：

<script>
export default {
  name: 'App',
  mounted(){
    console.log(__filename)
    const scriptsToLoad = [
      './template/bower_components/jquery/dist/jquery.min.js',
      './template/bower_components/jquery-ui/jquery-ui.min.js',
      './template/bower_components/bootstrap/dist/js/bootstrap.min.js',
      './template/bower_components/morris.js/morris.min.js',
      './template/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js',
      './template/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js',
      './template/plugins/jvectormap/jquery-jvectormap-world-mill-en.js',
      './template/bower_components/jquery-knob/dist/jquery.knob.min.js',
      './template/bower_components/moment/min/moment.min.js',
      './template/bower_components/bootstrap-daterangepicker/daterangepicker.js',
      './template/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
      './template/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js',
      './template/bower_components/jquery-slimscroll/jquery.slimscroll.min.js',
      './template/bower_components/fastclick/lib/fastclick.js',
      './template/dist/js/adminlte.min.js',
      './template/dist/js/pages/dashboard.js',
      './template/dist/js/demo.js'
    ];

    scriptsToLoad.forEach(src => {
      const script = document.createElement('script');
      script.setAttribute("src",src);
      document.head.appendChild(script);
    });
  }
}
</script>

但所有文件都返回404错误，示例错误如下：

GET http://localhost:8080/template/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js net::ERR_ABORTED 404 (Not Found)

我已经把AdminLTE的文件放在了src文件夹里，请问问题出在哪里？

问题根源 #

Vue项目中，src目录属于源码目录，会被Webpack/Vite等构建工具处理，浏览器无法直接通过相对路径访问src目录下的文件。你当前的写法是让浏览器从项目根路径（http://localhost:8080/）去请求template文件夹，但这个文件夹实际在src里，构建工具并没有把它暴露为可直接访问的静态资源，所以会返回404。

解决方案 #

方案1：将静态资源移至public目录（最推荐）

Vue的public目录是专门存放无需构建工具处理的静态资源的，浏览器可以直接访问这里的文件。

1. 把整个template文件夹复制到项目根目录的public文件夹下（如果没有public目录就新建一个）；
2. 修改scriptsToLoad中的路径，去掉开头的./，直接从根路径开始：

const scriptsToLoad = [
  '/template/bower_components/jquery/dist/jquery.min.js',
  '/template/bower_components/jquery-ui/jquery-ui.min.js',
  // ... 其他文件路径同理修改
];

这样浏览器会从http://localhost:8080/template/...请求资源，而public目录下的template正好对应这个路径，就能正确加载了。

方案2：通过npm包安装并引入（更符合Vue项目规范）

大部分AdminLTE的依赖都有对应的npm包，直接安装后通过import引入，无需手动管理静态文件：

1. 安装所需依赖：

npm install jquery bootstrap admin-lte jquery-ui-dist moment
# 其他依赖比如jquery-sparkline、jvectormap等也可以搜索对应的npm包安装

2. 在vue.config.js中配置全局暴露jQuery（因为AdminLTE依赖全局的$和jQuery）：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')

module.exports = defineConfig({
  // ... 其他原有配置
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
})

3. 在main.js中引入AdminLTE的CSS和JS：

import 'admin-lte/dist/css/adminlte.min.css'
import 'admin-lte/dist/js/adminlte.min.js'
// 按需引入其他依赖，比如日期选择器、图表库等

这种方式更符合Vue的模块化开发规范，也不需要手动维护一堆script标签。

方案3：通过构建工具处理src目录下的静态资源

如果你坚持把template放在src目录下，可以通过构建工具的路径解析来获取正确的URL：

• 如果你的项目是用Vite构建的：
  修改script的src为new URL('./template/...', import.meta.url).href：

  scriptsToLoad.forEach(relativeSrc => {
    const src = new URL(relativeSrc, import.meta.url).href;
    const script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
  });
  

• 如果是用Vue CLI（Webpack）构建的：
  用require.resolve来获取解析后的路径：

  scriptsToLoad.forEach(relativeSrc => {
    const src = require.resolve(relativeSrc);
    const script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
  });
  

  这种方式下，构建工具会把src目录下的template文件处理为可访问的静态资源，生成正确的URL。

备注：内容来源于stack exchange，提问作者Ashkan haghshenas