如何将cdn css文件添加到Vue Cli 3工程？
在Vue CLI 3工程中添加CDN CSS文件通常是为了利用CDN的分布式特性来加速静态资源的加载。以下是将CDN CSS文件添加到Vue CLI 3工程的步骤：
- 打开
public/index.html文件： 在Vue CLI 3项目中，public/index.html是项目的入口HTML文件。 - 在
<head>标签内添加CDN链接： 在<head>标签内添加一个<link>标签，其href属性指向你的CDN CSS文件的URL。
例如，如果你想添加Bootstrap的CDN CSS文件，你可以这样做：
<!-- public/index.html -->
<head>
<!-- 其他的meta标签、title等 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
>
</head>- 在
vue.config.js中配置externals（可选）： 如果你使用的是Vue CLI 3，并且想要通过CDN引入Vue或其他库，你可以在vue.config.js文件中配置externals选项，这样Webpack在打包时就不会将这些库打包进去。
例如，如果你通过CDN引入Vue和Vue Router，你的vue.config.js可能看起来像这样：
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'vue$': 'Vue',
'vue-router': 'VueRouter'
}
}
}确保在你的public/index.html中添加了相应的CDN链接：
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.js"></script>- 在组件中使用：
一旦你在
public/index.html中添加了CDN链接，你就可以在你的Vue组件中像平常一样使用这些库。
例如，如果你添加了Bootstrap的CSS，你可以在任何组件的模板中使用Bootstrap的类：
<template>
<div class="container">
<h1>Hello, Bootstrap!</h1>
</div>
</template>请注意，使用CDN时，你需要确保网络环境能够访问这些CDN资源，否则可能会导致资源加载失败。此外，当使用CDN时，最好也提供一个回退方案，以防CDN不可用。
相关·内容
没有搜到相关的沙龙
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
