阅读 67

cdn引入Element -ui

cdn引入 element-ui

需求

src=http___resource.shangmayuan.com_droxy-blog_2020_11_25_b4bdd6b223504c859fda43e6cd8bf0b0-2.JPEG&refer=http___resource.shangmayuan.jpg

由于老板感觉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"
    }
  ]
]
复制代码
文章分类
前端
文章标签