Vue3项目如何导入外部的CSS和JS资源

更新时间：2025年11月08日 15:06:09 作者：旧故新长

在Vue3项目中,可以通过多种方式导入外部的CSS和JS资源,包括在单组件中使用`@import`语句或动态加载,以及在全局`index.html`或`main.js`中引入,选择合适的方法,确保外部资源正确加载和应用

导入外部 CSS 文件

方法 1：在单个组件中使用<style>标签

可以在单个 Vue 组件的 <style> 部分使用 @import 语句来导入外部 CSS 文件：

<template>
  <!-- 组件模板 -->
</template>

<script setup>
// 组件逻辑
</script>

<style>
@import url('https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css');
</style>

方法 2：在全局index.html文件中引入

也可以在项目的 public/index.html 文件中直接添加 <link> 标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="external nofollow" >
</head>
<body>
  <div id="app"></div>
</body>
</html>

导入外部 JavaScript 文件

方法 1：在单个组件中动态加载

可以在单个 Vue 组件的 mounted 生命周期钩子中动态加载外部 JavaScript 文件：

<template>
  <!-- 组件模板 -->
</template>

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

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://fastly.jsdelivr.net/gh/2308863331/bkyl2d@main/loads.js';
  document.head.appendChild(script);
});
</script>

<style>
@import url('https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css');
</style>

方法 2：在全局main.js文件中引入

也可以在项目的入口文件 main.js 或 main.ts 中引入外部 JavaScript 文件：

import { createApp } from 'vue';
import App from './App.vue';

// 引入外部 JavaScript 文件
const script = document.createElement('script');
script.src = 'https://fastly.jsdelivr.net/gh/2308863331/bkyl2d@main/loads.js';
document.head.appendChild(script);

createApp(App).mount('#app');

总结

CSS 文件：
- 单个组件中使用 @import 语句。
- 全局 index.html 文件中直接添加 <link> 标签。
JavaScript 文件：
- 单个组件中在 mounted 生命周期钩子中动态加载。
- 全局 main.js 文件中引入。

选择适合你项目需求的方法来导入外部资源。这样可以确保你的 Vue 3 项目能够正确地加载和应用外部 CSS 和 JavaScript 文件。

到此这篇关于Vue3项目如何导入外部的CSS和JS资源的文章就介绍到这了,更多相关Vue3导入外部CSS和JS资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
Vue 检测变化的注意事项
这篇文章主要介绍了Vue 检测变化的注意事项，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-08-08
vue 中Virtual Dom被创建的方法
本文将通过解读render函数的源码，来分析vue中的vNode是如何创建的,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue调用高德地图实例代码
本篇文章主要介绍了vue调用高德地图实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
vue实现PC端分辨率适配操作
这篇文章主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue.js实现数据动态响应 Vue.set的简单应用
这篇文章主要介绍了vue.js实现数据动态响应，Vue.set的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
vue button的@click方法无效钩子函数没有执行问题
这篇文章主要介绍了vue button的@click方法无效钩子函数没有执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue实现一个动态添加行的表格步骤详解
在Vue组件中定义表格的数据模型,通常使用一个数组来存储表格的数据,每一行数据可以是一个对象,对象的属性对应表格的列,这篇文章主要介绍了Vue实现一个动态添加行的表格步骤详解,需要的朋友可以参考下
2024-05-05
Vue.js系列之项目结构说明(2)
这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-01-01
vue使用高德地图点击下钻上浮效果的实现思路
这篇文章主要介绍了vue使用高德地图点击下钻上浮效果的实现思路,本文以浙江省为例通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2019-10-10