vite编程

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编程相关内容摘自网络，仅供参考。相关信息请参见官方公告。