关于Vue-cli+ElementUI项目打包时排除Vue和ElementUI

花落s

于 2019-11-28 14:13:09 发布

阅读量2.6k

点赞数 1

分类专栏： Vue 前端 Webpack

本文链接：https://blog.youkuaiyun.com/qq_38386617/article/details/103292316

版权

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

Webpack

2 篇文章

订阅专栏

本文介绍如何通过修改Webpack配置与main.js文件，将Vue与ElementUI的加载方式从打包改为直接通过CDN引入，从而减少项目构建体积，提高加载速度。此方法需确保版本锁定，以避免因版本差异导致的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改 build/webpack.base.conf.js

....
module.exports = {
  ....
  // 表示不需要webpack打包的文件 
  externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
  }
}

修改 main.js 注释掉 Vue 和 ElementUI

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

修改 index.html CDN引入 Vue 和 ElementUI
注意，一定要锁版本，使用@来指定引入第三方js的版本

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css">

...

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.6/lib/index.js"></script>