cdn引入Element -ui

需求

由于老板感觉pad中其中一个项目运行的有点慢，小明接到需求要修改该项目，明确要求不能使用element -ui 但是还是有个同学强行在小明项目上使用了，小明真的是左右为难啊，现在小明只能使用cdn引入啦。

cdn引入element-ui

小明查看文档并快速的将代码ctrl+c、ctrl+v弄好了，还没运行呢小明就开始洋洋得意了，npm run dev之后，发现项目跑起来了，但是页面呢？ 白屏一片，查看报错 Vue is not defined 这时为何呢，此时小嘟看见了小明的屏幕白了，赶忙上前帮助。'哦吼，白屏了,我来看看'

发现了 Vue is not defined 就知道vue没有挂载，再查看代码

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
复制代码
复制代码

小明居然把这端代码放在了 <div id="app"></div> 的后面。。。

结束之后。还需要把引入打vue，element放入webpack进行配置

找到vue.config.js将下列代码复制进去

  configureWebpack: {
    externals: {
      // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
      'vue': 'Vue',
      // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
      // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
      'element-ui': 'ELEMENT'
  },
  }
复制代码
复制代码

将代码整理一下，运行代码正常运行了。

按需加载

另外小嘟将按需加载的配置也整理了一下

项目中存在babel-plugin-component 修改babel.config.js 添加一下代码

  plugins:[ 
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]
复制代码

文章分类

作者：小嘟
链接：https://juejin.cn/post/6986498241198030885
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。