vite版本的CDN引入的小问题

最新推荐文章于 2024-09-22 16:39:36 发布

???xixi

最新推荐文章于 2024-09-22 16:39:36 发布

阅读量653

点赞数 6

文章标签： vue.js

本文链接：https://blog.csdn.net/xixi_csdn/article/details/135254449

版权

本文讨论了proUrl的作用，正确配置cdn引入包的方法，以及gzip对文件体积的影响。重点提到vite-plugin-cdn-import的使用技巧，尤其是如何处理版本路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
proUrl是什么？

前言

看了几个文章要么不带prodUrl，要么就写的不对。
以防自己忘记，简单记录一下。

顺便简单吐槽一下gzip，不开启deleteOriginFile就会有双份文件打包体积更大，还需要在nginx进行操作

proUrl是什么？

proUrl是定义从哪个网站引入包的。

1.如果不写的话

在这里插入图片描述

2.如果写的话

看到这样写的

prodUrl:'https://unpkg.com/{name}@{path}',
prodUrl:'https://unpkg.com/{name}@{version}@{path}',

打包之后的样子是这样的
在这里插入图片描述

复制链接到浏览器会发现，根本找不到文件

正确的写法

prodUrl:'https://unpkg.com/{name}/{path}',
prodUrl:'https://unpkg.com/{name}@{version}/{path}',

打包之后的样子
在这里插入图片描述
浏览器里的样子

夸一下

本来还想吐槽一下vite-plugin-cdn-import，竟然不给加version的字段，谁知道人家直接可以在path上写艾

prodUrl:'https://unpkg.com/{name}/{path}',


 {
          name:'element-plus',// cdn中的名字
          var:'ElementPlus', // mainjs中的名字
          path:'@2.0.0/dist/index.full.js',
        },

打包之后的样子
在这里插入图片描述
浏览器里的样子

它还可以单独设定某个path

let cdn = 'http://xxxxx'


prodUrl:'https://unpkg.com/{name}/{path}',


 {
          name:'element-plus',// cdn中的名字
          var:'ElementPlus', // mainjs中的名字
          path:`${cdn}@2.0.0/dist/index.full.js`,
        },