发布于:,更新于:

Vite+Vue使用外部CDN引用element-plus全家桶

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

网上 Vite.js 的资料少,踩了不少坑
在掘金中找到一篇资料,但还是避免不了遇到了一些奇奇怪怪的问题

我这边使用的 vite-plugin-cdn-import 插件

解决

编辑 vite.config.ts

1
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
importToCDN({
modules: [
{
name: "vue",
var: "Vue",
path: "//unpkg.com/vue@next",
},
{
name: "vuex",
var: "Vuex",
path: "//unpkg.com/vuex@next",
},
{
name: "vue-class-component",
var: "VueClassComponent",
path: "//unpkg.com/vue-class-component@next",
},
{
name: "element-plus",
var: "ElementPlus",
path: "//unpkg.com/element-plus",
css: "//unpkg.com/element-plus/dist/index.css",
},
],
}),

用原文中的方法会出现错误
原因参考:使用了pinia或其他依赖于vue的库

报错

上面方式可解决