cdn配置流程(cdn配置cname)

本文目录：

• 1、<"http://#vue3+element-plus%E9%85%8D%E7%BD%AEcdn" title="vue3+element-plus配置cdn" "">vue3+element-plus配置cdn
• 2、<"http://#%E7%BB%99%E5%BA%94%E7%94%A8%E6%B7%BB%E5%8A%A0cdn%E5%8A%A0%E9%80%9F%E6%9C%8D%E5%8A%A1%EF%BC%88%E9%98%BF%E9%87%8C%E4%BA%91%EF%BC%89" title="给应用添加cdn加速服务（阿里云）" "">给应用添加cdn加速服务（阿里云）
• 3、<"http://#%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E9%85%8D%E7%BD%AE%E8%85%BE%E8%AE%AF%E4%BA%91CDN" title="如何正确配置腾讯云CDN" "">如何正确配置腾讯云CDN
• 4、<"http://#%E8%85%BE%E8%AE%AF%E4%BA%91%E7%9A%84CDN%E5%88%B0%E5%BA%95%E8%AF%A5%E6%80%8E%E4%B9%88%E9%85%8D%E7%BD%AE" title="腾讯云的CDN到底该怎么配置" "">腾讯云的CDN到底该怎么配置
• 5、<"http://#webpack%E4%BD%BF%E7%94%A8HtmlWebpackPlugin%E8%BF%9B%E8%A1%8Ccdn%E9%85%8D%E7%BD%AE" title="webpack使用HtmlWebpackPlugin进行cdn配置" "">webpack使用HtmlWebpackPlugin进行cdn配置
• 6、<"http://#%E9%98%BF%E9%87%8C%E4%BA%91%E6%80%8E%E4%B9%88%E9%85%8D%E7%BD%AECDN%E5%8A%A0%E9%80%9F" title="阿里云怎么配置CDN加速" "">阿里云怎么配置CDN加速

vue3+element-plus配置cdn

最近在做一个项目，项目配置版本如下：

下面分享一下，如上配置的 vue3 项目，如何配置 cdn 加速

介绍下常见的免费 cdn 网站

BootCDN 和 Staticfile CDN 简单明了的搜索方式就不说了，这里讲一下 UNPKG 搜索 cdn 资源的方式。

cdn 文件路径格式：

路径解析如下图：

直接使用资源名后面加 / ，可以查看文件夹目录，比如： ，复制进浏览器地址栏，可看见如下目录：

按如下配置，操作方式基本一样，文件的 cdn 版本自行替换。

vue.config.js

index.html

在 head 标签里加上如下：

在 body 标签里加上如下：

main.ts

确实配了 cdn 后打包文件小了很多，不过如果 cdn 挂了，你的项目也就挂了。

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

给应用添加cdn加速服务（阿里云）

老样子我们还是从是什么，为什么，怎么用三个方面来谈谈对cdn的认识,首先我们可以确定的是cdn是属于应用（网站，后台管理，app，小程序）的优化范畴。

CDN的全称是Content Delivery Network，即[内容分发网络]。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

提高应用访问速度

以阿里云的服务为例子截图走流程讲解

（1）登陆阿里云，搜索CDN，进入模块第一次需要开通一下，然后进入CDN控制台

（2）CDN控制台-域名管理-添加域名

加速域名就是你网站的域名暂且后文都用 代替

大概等待几分钟状态变成“正常运行”即可进行下一步

（3）添加cname解析

做cname解析之前需要把 的域名的A记录删掉（因为一个域名只能做一个A记录或者一个cname）我们把A记录删掉换成cname解析，cname记录值就是下面截图的方框里面的复制即可

（4）核验是否成功，ping 绿色处显示出来的是那个cname值就证明cdn已经配置好了

(5)最后提醒一点如果你的站点是HTTPS的需要在CDN这块也上传证书并且之前选的是443端口，如果是你的应用是http的那之前就选80端口

（6）再补充一点那就是开启CDN之后想改网站内容可能不生效因为已经缓存到节点上了，所以确保已经不再改需求了再加CDN；或者配置下CDN缓存策略

阿里云配置CDN缓存策略教程

辅助——阿里云CDN视频教程

如何正确配置腾讯云CDN

1.网页静态内容/移动应用加速

推荐配置：CDN+云主机CVM+对象存储COS

2.大文件下载分发/音视频点播加速

推荐配置：CDN+对象存储COS

3.音视频直播加速

推荐配置：CDN+对象存储COS

腾讯云的CDN到底该怎么配置

CDN 的使用流程如下图所示

在使用 CDN 服务前，您需要进行实名认证及 CDN 服务的开通，如果您的腾讯云账号已经开通 CDN，请直接跳到 接入域名。

接入域名

填写域名配置

进入 CDN 控制台，单击左侧菜单中【域名管理】进入相应页面，单击【添加域名】。

在域名位置填入需要加速的域名，该域名需要满足以下条件：

已经在工信部进行过备案。

尚未被接入过腾讯云 CDN。

下面操作内容比较多，都是腾讯云帮助文档上面的，不粘贴过来了，还是你过去看看吧。

webpack使用HtmlWebpackPlugin进行cdn配置

在前面的 文章 中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：

其中BootCDN 是 Bootstrap 中文网 支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以 Bootcdn 为例说明。

在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是

在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用 html-webpack-plugin 动态插入cdn链接。

关于webpack的使用这里不做过多的介绍，将以vue--cli 2.x生成的默认项目为例做介绍

html-webpack-plugin 是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用 esj语法 可以读取到配置中的参数，简化了html文件的构建。

我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。

在线项目地址

vue-cli 2.x

创建名为 webpack-cdn-demo ，类型为webpack的 vue 项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看 vue-cli 3 。

安装依赖

启动项目

下面简单介绍一下目录结构

其中build文件夹中的 webpack.prod.conf.js 是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。

在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。

在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。

注意安装时记得 -S ，它的作用是安装完后在 package.json 项目文件中插入记录，后续操作需要读取已安装模块

对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。

依次搜索出前面模块，结果如下

按照规律，得出cdn资源路径规则为

其他cdn服务商同理

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行

name 模块名称，与package.json同名

scope 模块作用域命名

js js地址

css css地址

这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配 (目前没找到更好的做法)。

在webpack热启动本地调试的时候，我们可以使用cdn。

在 build/webpack.dev.conf.js 中，默认已经引入了 utils.js ，所以可以直接调用相关方法，如果是自定义的文件，记得引入。

我们可以往里面添加点自定义属性，方便在index.html中调用。 ，修改如下：

其中 cdnConfig 和 onlyCss 自定义属性，在html上通过 htmlWebpackPlugin.options 可以读取到。

更多html-webpack-plugin配置情况官网，这里暂时不需要更多。

在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。

注意此处的 externalModules ，后面用到，也就是比dev多的步骤。

加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。

webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。

通过 % % 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。

ps: 修改了webpack配置，需要重启项目才会生效

打包项目

可以看到打包体积大大减小了

页面上也正确引入了cdn资源。

最后奉上git地址：

比悲伤更悲伤的分割线

原来两年前已经有人做了一个类型的webpack-cdn-plugin

阿里云怎么配置CDN加速

打开阿里云控制台，点击CDN控制台，再点击“添加加速域名”，如下图

添加要加速的域名

选择要加速的资源类型，如果是博客网站，选择“图片小文件”

选择源站类型

指图片小文件的获取方式，通过OSS域名、IP、或源站域名访问

在域名管理后台，添加CNAME记录

在CDN域名列表中，点击“管理”，如下图

在列表中，点击“复制CNAME”

在域名管理后台中，添加一条CNAME记录

记录值就是上面复制的

【cdn配置流程】内容来源于网络，若引用不当、侵权，请联系我们修正或者删除！