Vue3項(xiàng)目如何導(dǎo)入外部的CSS和JS資源

更新時(shí)間：2025年11月08日 15:06:09 作者：舊故新長(zhǎng)

在Vue3項(xiàng)目中,可以通過(guò)多種方式導(dǎo)入外部的CSS和JS資源,包括在單組件中使用`@import`語(yǔ)句或動(dòng)態(tài)加載,以及在全局`index.html`或`main.js`中引入,選擇合適的方法,確保外部資源正確加載和應(yīng)用

導(dǎo)入外部 CSS 文件

方法 1：在單個(gè)組件中使用<style>標(biāo)簽

可以在單個(gè) Vue 組件的 <style> 部分使用 @import 語(yǔ)句來(lái)導(dǎo)入外部 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文件中引入

也可以在項(xiàng)目的 public/index.html 文件中直接添加 <link> 標(biāo)簽：

<!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"  rel="external nofollow" >
</head>
<body>
  <div id="app"></div>
</body>
</html>

導(dǎo)入外部 JavaScript 文件

方法 1：在單個(gè)組件中動(dòng)態(tài)加載

可以在單個(gè) Vue 組件的 mounted 生命周期鉤子中動(dòng)態(tài)加載外部 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文件中引入

也可以在項(xiàng)目的入口文件 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');

總結(jié)

CSS 文件：
- 單個(gè)組件中使用 @import 語(yǔ)句。
- 全局 index.html 文件中直接添加 <link> 標(biāo)簽。
JavaScript 文件：
- 單個(gè)組件中在 mounted 生命周期鉤子中動(dòng)態(tài)加載。
- 全局 main.js 文件中引入。

選擇適合你項(xiàng)目需求的方法來(lái)導(dǎo)入外部資源。這樣可以確保你的 Vue 3 項(xiàng)目能夠正確地加載和應(yīng)用外部 CSS 和 JavaScript 文件。

到此這篇關(guān)于Vue3項(xiàng)目如何導(dǎo)入外部的CSS和JS資源的文章就介紹到這了,更多相關(guān)Vue3導(dǎo)入外部CSS和JS資源內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: