vue3.0项目使用cdn链接实现瘦身(element-ui)

最近在用vue写项目，发现打包出来的模块实在是太大了(好几M那种)

已经弄好的例子：
vue3-cdn

准备一个简单的例子

我们先用webstrom或者vue cli构建一个vue项目（我这里是vue3）

npm install element-plus --save #安装element-plus

然后就引入一下组件什么的bla bla bla

---

需要解决的问题

嗯，很明显这个体积是不符合我们的要求的，如果自己的服务器只有1M小水管，都要10s才能打开~

开始改造项目

• 我们先找到public目录下的index.html
  

我们找到官网的cdn地址，直接放进去

然后在项目根目录下创建一个vue.config.js的文件

复制粘贴进去vue.config.js就行了

module.exports = {
  // 设置打包文件相对路径
  publicPath: "./",
  // 配置使用CDN
  configureWebpack: {
    externals: {
      vue: "Vue",
      "element-plus": "ElementPlus"
    }
  }
};

main.js配置如下

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import ElementPlus from "element-plus";
//import "element-plus/lib/theme-chalk/index.css";

createApp(App)
  .use(store)
  .use(router)
  .use(ElementPlus)
  .mount("#app");

然后进行打包，OK，完美引入CDN