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

网上 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的库

上面方式可解决