解决方案:使用externals引用第三方资源,防止element资源被打包到自己项目中,(总共修改3个页面index.html、webpack.base.conf.js、main.js)

1、修改index.html页面,再head中引入cdn。

2.修改webpack.base.conf.js文件.添加externals配置

externals: { vue: 'Vue', element: 'ElementUI', },

3.删除main.js中的相应import from。因为如果不删除,打包的时候还会把这两个文件打进去

因为项目是后面越做越大,发现elementUI打包在一起太大,就想将elementUI以CDN的方式引入,但是我只将elementUI使用CDN引入会报找不到ElementUI,

尝试了很多遍,发现这种将elementUI的CDN用法,同时也需要vue也是CDN引入,否则总是报错,找不到element;

vue-cli 引用elementUI打包后文件过大相关推荐

  1. vue解决打包后文件过大的问题-使用压缩插件打包后压缩文件-compression-webpack-plugin

    前言: 在用vue开发项目的时候,经常会面临一个文件,就是打包以后文件太大,首页加载时间长的问题,一般我们会从压缩文件,cdn引入文件,加载整合雪碧图等等的方式来优化,这里来谈谈压缩文件,主要使用的插 ...

  2. maven资源过滤导致打包后文件变大

    今天遇到一个问题,我们有个ip.dat二进制文件,通过里面内容可以解析ip所在的地域信息,本地单元测试都是OK的,部署到测试环境后,发现解析ip的时候报错.拿测试环境打印出的IP地址,在本地单元测试也 ...

  3. 解决vue项目打包后文件过大导致首屏加载30s+的问题

    依赖 vue v2.6 axios+tailwindcss+element-ui+... 文件打包情况 File Size Gzippeddist/js/chunk-vendors.fb40d429. ...

  4. vue cli 4.x打包后如何部署到tomcat服务器上

    使用npm run build打包好dist后,不能直接打开里面的index.html,否则页面是一片空白 ================================= 这时候我们就需要用服务器 ...

  5. 快速解决Vue项目打包后文件过大问题

    快速解决Vue项目打包后文件过大问题 为什么打包后文件过大? 如何快速解决 一.路由懒加载[使用es6提案的import()方式] 二.CDN引入 为什么打包后文件过大? 移动app项目,使用vue- ...

  6. 2021-10-27 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在

    这里写自定义目录标题 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 1 ...

  7. vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory

    问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析 从给出的提示可以看出 ...

  8. ideaspringboot项目上传服务器_nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss

    在读这篇文档时,希望你对 nuxt 及 pm2,有简单的了解 nuxt pm2 前期准备 安装 pm2 及构建 nuxt $ npm i pm2 -g $ npx create-nuxt-app &l ...

  9. Python使用pyinstaller打包成exe文件,并支持传入外部参(已解决打包后文件大的情况)

    目录 一.为什么要打包 二.打包后文件大的问题 三.外部传参 3.1.sys库 3.2.argparse库 四.pyinstaller打包 4.1.安装包 4.2.打包命令 4.3.新环境打包 五.运 ...

最新文章

  1. 从头开始学JavaScript (七)——函数
  2. java color类 蓝色_java中Color类的简单总结
  3. 万物互联、应用现代化、云原生新范式,华为云为数字化转型提供最优解
  4. Scala in depth 6 Scala的类型系统 中
  5. 若依如何降低mysql驱动版本?
  6. 提高MySQL数据库查询效率的几个技巧(转载)
  7. SQLServer2005 中 XML类型方法中 XQuery中变量的参数化--匆忙整理
  8. 智能家居如何让消费者心甘情愿地买单
  9. flask从表单中的提交中获取数据(不使用第三方库)
  10. DB2错误信息(按sqlcode排序)
  11. SCSI代码分析(2)SCSI设备的管理1
  12. 49-从哥尼斯堡七桥问题开始
  13. Bootstrap 格栅 row-cols-X row-cols-3 row-cols-5
  14. 以汨罗命名的鸿蒙网,汨罗千年古镇“新市”考
  15. 苹果设计思维案例研究,困难期生存的关键
  16. 这里告诉大家,“后端开发工程师”到底是做什么的。
  17. SD-WAN网络加速,开通游戏快车道
  18. 4G时代 运营商的经营模式变化
  19. 基于jsp+mysql+ssm酒店管理系统-计算机毕业设计
  20. 【Excel设置任意列为默认文本格式】

热门文章

  1. android P版本ro.build.date时间修改
  2. php intval trim,php数据入库前清理 注意php intval与mysql的int取值范围不同_PHP教程
  3. java项目启动后运行方法_spring boot在启动项目之后执行的实现方法
  4. 两个有序链表序列的交集_LeetCode | 21.合并两个有序链表
  5. android 使用 audiorecord 和 audiotrack 实现实时录音播放
  6. 关于Java中 求Logn/log2 的精度问题。
  7. 字符串经典题之扑克牌的大小
  8. SQLAlchemy ORM教程之一:Create
  9. Qt:Windows编程—代码注入
  10. 常用的表单正则表达式