如何在Vue.js项目中正确导入自定义CSS与JS文件？

我手里有一个HTML格式的付费后台仪表盘模板，正在把它转成Vue项目。现在遇到的问题是：如何正确导入jQuery、bootstrap bundles、perfect-scrollbar这类第三方CSS和JS文件？难道只能把它们放到public文件夹，然后手动加到index.html里吗？

我自己试了一种动态加载的方案，在npm run dev时能正常运行，但构建后把dist部署到服务器就报错了，原因是脚本链接还指向/src目录。我的尝试代码如下：

App.vue

<script setup>
import { onMounted } from 'vue'
import { loadExternalScripts } from './utils/scriptLoader';

onMounted(() => {
    const scripts = [
        '/src/assets/js/plugins/jquery-3.3.1.min.js',
        '/src/assets/js/plugins/bootstrap.bundle.min.js',
        '/src/assets/js/plugins/perfect-scrollbar.min.js',
    ];

    loadExternalScripts(scripts)
        .then(() => {
            console.log('All external scripts loaded successfully');
            // Now you can safely use any jQuery or Bootstrap functions here
        })
        .catch((error) => {
            console.error('Error loading external scripts:', error);
        });
});
</script>

<template>
    <router-view />
</template>

<style scoped></style>

scriptLoader.js

const loadedScripts = new Set();

export function loadExternalScripts(scripts) {
    return new Promise((resolve, reject) => {
        const loadScript = (index) => {
            if (index >= scripts.length) {
                resolve(); // Resolve when all scripts are loaded
                return;
            }

            const src = scripts[index];
            if (loadedScripts.has(src)) {
                loadScript(index + 1); // Skip already loaded scripts
                return;
            }

            const script = document.createElement('script');
            script.src = src;
            script.onload = () => {
                loadedScripts.add(src);
                loadScript(index + 1); // Load next script
            };
            script.onerror = () => reject(new Error(`Script load error: ${src}`));
            document.head.appendChild(script);
        };

        loadScript(0); // Start loading scripts from the first one
    });
}

问题根源 #

开发环境下，/src/路径能被开发服务器正常解析，但构建后，Vue会把src目录下的资源打包到dist/assets里，原有的/src/路径在生产环境中不存在，所以导致加载失败。

三种可行的解决方案 #

方案一：通过npm安装依赖（推荐） #

如果这些资源有npm包，优先用这种方式，便于版本管理和打包优化：

1. 安装依赖：

npm install jquery bootstrap perfect-scrollbar

2. 在main.js中全局导入：

// 导入CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

// 导入并挂载jQuery到全局（因为Bootstrap依赖jQuery）
import $ from 'jquery';
window.$ = window.jQuery = $;

// 导入Bootstrap JS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// 导入perfect-scrollbar
import PerfectScrollbar from 'perfect-scrollbar';
window.PerfectScrollbar = PerfectScrollbar;

之后在组件中就可以直接使用$、Bootstrap相关方法和PerfectScrollbar了。

方案二：使用public目录（适合付费/非npm资源） #

如果你的资源是付费模板里的定制版本，无法通过npm安装，可以放到public目录：

1. 将JS文件放到public/assets/js/plugins/目录下
2. 两种加载方式：
   • 方式A：在index.html中直接引入（最稳定）
     在public/index.html的<head>或<body>末尾添加：

     <script src="<%= BASE_URL %>assets/js/plugins/jquery-3.3.1.min.js"></script>
     <script src="<%= BASE_URL %>assets/js/plugins/bootstrap.bundle.min.js"></script>
     <script src="<%= BASE_URL %>assets/js/plugins/perfect-scrollbar.min.js"></script>
     

   • 方式B：动态加载时使用正确路径
     修改App.vue中的脚本路径，用import.meta.env.BASE_URL（Vue 3+）拼接：

     const scripts = [
         `${import.meta.env.BASE_URL}assets/js/plugins/jquery-3.3.1.min.js`,
         `${import.meta.env.BASE_URL}assets/js/plugins/bootstrap.bundle.min.js`,
         `${import.meta.env.BASE_URL}assets/js/plugins/perfect-scrollbar.min.js`,
     ];
     

     这样构建后会自动替换为正确的资源路径。

方案三：修改动态加载逻辑，使用资源导入 #

如果不想放到public，可以通过ES模块导入的方式让打包工具处理：

import { onMounted } from 'vue';

onMounted(async () => {
    // 顺序加载（因为Bootstrap依赖jQuery）
    const $ = (await import('@/assets/js/plugins/jquery-3.3.1.min.js')).default;
    window.$ = window.jQuery = $;
    await import('@/assets/js/plugins/bootstrap.bundle.min.js');
    await import('@/assets/js/plugins/perfect-scrollbar.min.js');
    
    console.log('所有脚本加载完成');
});

这种方式下，打包工具会把这些资源处理后放到dist/assets里，路径自动正确。

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