vue webpack中elementui使用cdn引入

最新推荐文章于 2024-05-21 14:53:04 发布

Zillionnn

最新推荐文章于 2024-05-21 14:53:04 发布

阅读量1.4w

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/RevolCat/article/details/90139201

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue webpack中elementui使用cdn引入

现在webpack4打包有splitChunks可以将第三方包分块，如果是webpack3用cdn可以减小vendor.js的大小；

index.html

需要先引入vue，再引入elementui

	 <head>
	    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	...
	  </head>
  
  	...
  	
	<body>
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
      <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>

webpack.base.conf.js

网上有说 ‘element-ui’ 的value需要改成ELEMENT，不过试了一下，好像两种都行；

 ...
 externals: {
    'vue': 'Vue',
    // 'element-ui': 'ElEMENT',
    'element-ui': 'ElementUI',
  }
  ...

main.js

在入口文件里，vue还是照样import ， elementui不用import可以直接使用，这样打包出来的vendor.js就小很多了；

import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)

示例项目 https://github.com/Zillionnn/vue-cdn.git

Zillionnn

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
8
评论
vue webpack中elementui使用cdn引入

vue webpack中elementui使用cdn引入现在webpack4打包有splitChunks可以将第三方包分块，如果是webpack3用cdn可以减小vendor.js的大小；index.html需要先引入vue，再引入elementui <body> <script src="https://cdn.bootcss.com/vue/2.6.1...
复制链接

扫一扫