解决方案:使用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+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  2. vue中使用videojs打包后体积过大优化

    videojs 是一个非常好的js库,可以支持各种格式的视频播放,也能做直播流.官网地址 https://videojs.com/ 在vue项目中也可以使用 vue-video-player ,更好的 ...

  3. vue单页面应用打包后相对路径、绝对路径相关问题

    原文链接:  vue单页面应用打包后相对路径.绝对路径相关问题展开       在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...

  4. 打包phar文件过大的问题。

    根据一个开源工具得到的灵感,使用流打包,并使用token_get_all移除了所用PHP文件的空白.现在打包出来只有93k了.谢谢关注. 我一个简单的文件,加上一个symfony的process包,打 ...

  5. webpack减少打包后文件体积的几种方法

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  6. vue css背景图片打包后路径问题

    limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说 ...

  7. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  8. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  9. .2-浅析webpack源码之打包后文件

    先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: // config.js module.exports = { entry: './input.js', output: ...

随机推荐

  1. Another git process seems to be running in this repository

    今天在推送项目的时候git突然报如题的错误.查了一下是由于git被另外一个程序占用,产生原 原因在于Git在使用过程中遭遇了崩溃,部分被上锁资源没有被释放. 解决方案也很简单,在git中找到对应的in ...

  2. Python爬虫实战:批量下载网站图片

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以 ...

  3. Android 开发凉了吗!

    昨天我拿了本<安卓开发大全>的书,把它放进了冰箱,你猜怎么样? 它凉了. 记得2013年的时候,安卓崛起,一夜之间遍地谈论安卓这个奇怪的机器人. 安卓受宠的原因,主要围绕着: 1 应用商城 ...

  4. unittest---unittest封装方法

    前面我们写了一个关于查询歌曲的接口测试,但是代码重复性比较大,进行一次简单的优化 封装方法 在编写自动化脚本的时候,都要求代码简介,上一篇unittest---unittest断言中代码重复性比较多, ...

  5. Java面向对象之继承(一)

    目录 Java面向对象之继承 引言 继承的特点 语法格式 父子类的关系 继承要点 重写父类方法 继承中的构造器 继承中的super关键字 ... Java面向对象之继承 继承是面向对象的第二大特征,是 ...

  6. django找不到模板的错误处理django.template.exceptions.TemplateDoesNotExist: blog/list.html

    错误提示如下图: 程序出错对于程序员而言是最常见的,一般解决的要点是看清错误提示(读懂英文很重要) 根据错误提示 blog\list.html这个文件不存在,也就是没找到资源 这个时候需要去检查有没有 ...

  7. EntityFramework中实体类到表名的批量映射

    在使用EntityFramework做CodeFirst开发时,经常需要将实体类映射到数据库表,但是C#实体类和数据库表中的命名遵循的是不同的规范,这就需要为每个实体类做一个到数据库表名的映射.大多情 ...

  8. Docker Compose 基本使用

    Dockercompose v3官网文档:  https://docs.docker.com/compose/compose-file/   Dockercompose中文: http://www.d ...

  9. VUE程序调试的方法

    目录 VUE程序调试的方法 1.写本文的背景 2.调试与测试 3.Console调试法 3.1 添加console.log指令 3.2 调出温度界面如下 3.3 Google浏览器的Console窗口 ...

  10. VC遍历访问目录下的文件

    访问目录文件夹下的文件是经常需要的操作,C/C++和win32接口都没有提供直接调用的函数.在这里总结了几个经常用到的函数,通过MFC的CFileFind函数递归遍历实现,包括以下几个功能函数: 查找 ...