当前位置：首页 > 行业动态 > 正文

vue加载cdn

admin
行业动态
2025-03-12
2

在 Vue 项目中加载 CDN 资源，通常可以在 public/index.html 文件中通过 ` 标签引入。` html，，，，，，Vue App，，，，，，，，，，，，“

Vue加载CDN的多种方式及示例

一、在HTML模板中直接引用

1、添加CDN地址到index.html：在public/index.html文件的<head>标签中添加你需要的CDN地址，引入Bootstrap和jQuery库：

代码	说明
	引入Bootstrap的CSS样式表
	引入jQuery库

2、在Vue组件中使用：在上述方法中引入的库可以直接在Vue组件中使用，在一个简单容器组件中使用Bootstrap的类：

代码	说明
	使用Bootstrap的container类

二、在Vue实例中动态加载

1、动态加载脚本：在Vue组件的mounted生命周期钩子中，使用createElement方法动态加载脚本，动态加载jQuery：

| 代码 | 说明 |

vue加载cdn

| –| –|

|<template> <div> <h1>Dynamic Script Loading</h1> </div> </template> |

vue加载cdn

| `<script> export default { mounted() { this.loadScript("https://code.jquery.com/jquery-3.3.1.min.js", () => { console.log("jQuery loaded dynamically!"); $(document).ready(function() { console.log("jQuery is ready!"); }); }); }, methods: { loadScript(src, callback) { const script = document.createElement("script"); script.type = "text"