参考了这篇文章：[Vue3] Vite中使用cdn来加载需要的库文件-前端/后端-繁花云
网上关于vite的资料也非常少，踩了一些坑，终于弄完了。分享一下。

到element-plus官网复制CDN链接，注意，连同vue的CDN链接也要复制。

//index.html

    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

下载这个包npm i rollup-plugin-external-globals -D，并配置vite.config.js文件

//vite.config.js

import externalGlobals from 'rollup-plugin-external-globals'

export default defineConfig({
    build:{
        rollupOptions:{
            external: ['vue', 'element-plus'],
            plugins: [
                externalGlobals({
                    vue: 'Vue',
                    'element-plus': 'ElementPlus',
                }),
            ],
        }
    }
})

在main.js中配置

//main.js

import ElementPlus from 'element-plus'

createApp(App).use(router).use(ElementPlus).mount('#app')

这样就配置好了，可以打包看一下了，npm run build，npm run serve。
正常运行，注意，此时是没有下载element-plus的包的。所以开发环境下运行是会报错的，npm run dev。

开发环境下要查看效果，还是要下载element-plus，npm i element-plus -S，然后按照正常的步骤来。
那这样引入CDN的意义是什么？ 意义在于开发环境下按照正常的开发步骤去走。但是一旦打包，则走的是CDN的形式，不去打包element的npm包。

不配置时

不配置时，js文件的体积非常大。

配置后

配置后，直接少了600K。

总结

开发时按照正常的引入方式就行了，只不过需要增加一个打包的配置。这样在打包的时候就会自动识别，并且不去打包这个npm包，而是变成引用CDN的链接。

vue3+vite2增加element-plus的CDN链接打包构建

不配置时

配置后

总结