通过CND方式引入elementui,vue,vuex,vue-router

本文介绍了如何通过引入CDN链接,在public目录下的index.html中加载Element UI、Vue、Vuex和Vue Router等第三方库,以提升项目加载速度。同时在vue.config.js中配置externals,注释掉原代码中的相关引入,并重启项目实现CDN优化。
摘要由CSDN通过智能技术生成

首先在public目录下的index.html中引入对应第三方库的cdn地址:

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

注意,cdn地址的引入要放在 <div id="app"></div> 之前。即在项目加载之前引入cdn地址文件;

第二步,在vue.config.js中的configureWebpack配置下,增加:

config.externals = {
      // CDN 的 Element 依赖全局变量 Vue, 所以 Vue 也需要使用 CDN 引入
      'vue': 'Vue',
      // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的,
      // 不去 node_modules 中找,而是去找 全局变量 ELEMENT
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex'
    }

第三步,注释掉原代码中引入的vue,vuex,vue-router,elementui等;

第四步,重启项目,鼓掌撒花。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值