No.19 vue-element-admin 学习使用（十四）cdn， 更换主题

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

cdn

webpack打包后，有些第三方依赖占用的空间很大，例如vue，element，Echarts，这种，可以使用CDN外链来引入这些第三方库，来加快构建的速度。

项目可以自己搭CDN服务，也可以用第三方的服务，例如unpkg等，它提供了免费的资源加速和缓存优化。

之前公司项目打包速度慢，考虑用cdn来着，但是又害怕cdn哪天不稳定，引发神秘bug，遂放弃了使用cdn，虽然慢一点，但是稳啊，在我司，稳定重于一切。

使用方式

在vue.config.js, 添加 externals 让 webpack 不打包 vue 和 element，在configureWebpack下添加

configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    externals: {
      vue: 'Vue',
      'element-ui': 'ELEMENT'
    },

然后需要配置一下第三方的cdn

之后再通过html-webpack-plugin注入到 index.html之中，

chainWebpack(config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })

最后在 public/index.html。通过conf 依次注入 css 和 js。我引入似乎有一些小bug，就没引入了。

运行一下npm run preview -- --report，原本的是这样的，

使用cdn引入后，变成了现在这样，可以看到element已经不见了，这样，本项目的构建速度就加快了很多。

更换主题

element的组件样式覆盖，之前讲过了，就不再赘述了。

element自带的换肤功能@/components/ThemePicker中，通过正则，修改颜色变量，来实现主体的更换。不需要准备多套主体，可以自由的换颜色。

多套主体换肤，需要写多套主体，基于官方的主题生成库 element-theme 进行了相应的改造

首先我们下载 custom-element-theme 项目

git@github.com:PanJiaChen/custom-element-theme.git
npm i element-theme -g
npm install

看一下官方的解释吧，很清楚，我暂时没有相应需求，就不测试了（毕竟后台管理系统做多个主题太沙雕了吧，何况我司又无UI，做出来也是丑的雅痞）