CDN面纱：
CDN 是内容分发网络的缩写。它是一种基于互联网的分布式服务，旨在加快网站内容的加载速度，提高用户访问网站的体验。 CDN在全球多个地区部署缓存服务器节点，当用户访问网站时，CDN系统根据用户的地理位置、网络状况和环境将用户的请求重定向到最近的服务器。它减少了每个服务器节点的负载，减少了网络延迟，提高了内容加载速度。
——描述来自同义钱文
对于以前从未使用过CDN（从未搞乱设置或登录过管理控制台）的人来说，CDN 可能显得很神秘，但使用过CDN 的人会觉得它们非常简单。
我第一次接触CDN是在2014年。 H5可以上下左右滑动，有动画效果，还可以让我们开发3D效果。我们生活在一个前端在互联网世界中越来越流行的时代。
手机上展示H5页面采用了图片压缩、js、css文件压缩等方式来提升用户体验，并且正在学习雅虎前端性能优化的35条万能法则。
为了通过H5来推广公司业务，公司还花了不少钱购买了CDN服务，当时每个月还需要几十W。想想当时真是赚大了~~。
更新代码和镜像后，只需将开发的静态文件上传到服务器上的指定目录，登录CDN管理控制台，然后单击清理按钮即可。第二个最常见的句子是“请清除浏览器缓存并重试”。
Vue配置CDN:
Vue3官网介绍了如何在Vue3中使用CDN启用地图导入。
脚本类型=\’导入地图\’
{
\’导入\’: {
\’vue\’: \’https://unpkg.com/vue@3/dist/vue.esm-browser.js\’
}
}
/剧本
div id=\’app\'{{ 消息}}/div
脚本类型=\’模块\’
导入{ createApp, ref } 到\’vue\’
创建应用程序（{
环境（） {
const message=ref(\’你好Vue！\’)
返回{
信息
}
}
}).mount(\’#app\’)
/剧本
需要注意：
1. 定义并启用script 标签的type 属性为“importmap”。
2.您的配置中引入Vue的CDN版本必须支持ESM。
问题：
1.如何在Vue项目中使用地图导入功能？
其实导入地图功能是浏览器默认支持的功能，可以直接在index.html中使用，如图所示。
但是，这种方法在npm run dev 期间会出现问题。
当我将axios导入app.vue时（vue也导入到main.js中），导入vue时不报错，但是导入axios时报错。
解决办法：
1.本地安装axios
2.添加build.rollupOptions.external axios
构建：{
rollupOptions:{
外部：[
“阿克西奥斯”
],
}
}
问题彻底解决，本地运行没有任何问题，生产打包的axios也不会打包到构建包中。
Vite配置CDN
Vite 官网没有提供如何设置CDN 或使用哪些插件的具体说明。查看github 上的Awesome-vite（vitejs/awesome-vite: 与Vite.js 相关的精彩内容的精选列表(github.com)）。唯一的插件列表是vite-plugin-cdn2。
不过，社区推荐的是vite-plugin-cdn-import。
vite-plugin-cdn-import插件：
在npm 上找到该插件。插件版本为1.0.1，配置如下：
问题：
axios加载异常也会报错。
与上面相同的解决方案
注意：
不同版本的vite-plugin-cdn-import 配置方法不同。例如0.3.5版本的设置为：
从“vite-plugin-cdn-import”导入{Plugin as importToCDN,autoComplete}
以上#Vite编程相关内容摘自网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91568.html
