因为项目用到了elementUI,打包之后包括vue、axios、elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示。在百度过后发现可以使用外链接而不用模块包。

博主使用的外链接包含vue、axios、elementUI。

第一步是找到对应的版本,在package-lock.json找到固定的版本号

第二步是在 https://www.bootcdn.cn/  找到对应的版本链接

比如axios的对应 https://www.bootcdn.cn/axios/  网址。

第三步写在index.html里面,script标签vue的引入一定要在其他之前,例如elementui需要引入vue,如果在引入elementui之后就会报错,因为没有找到vue

第四步在webpack.base.conf.js与entry相同的级别

 externals: {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT'
}

第五步在main.js包括各个地方引用Vue/axios中 import Vue from 'vue'; import axios from 'axios';注释掉

第六步打包完成

然后原本从500kb的包就变成了400b左右

以上如果有错误的地方欢迎指出。谢谢

关于webpack打包vue后vendor包过大的问题的更多相关文章

  1. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  2. webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  3. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  4. 使用webpack打包vue工程

    记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...

  5. 【原】使用webpack打包的后,公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  6. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  7. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  8. 16.如何做到webpack打包vue项目后,可以修改配置文件

    问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...

  9. 解决webpack打包vue项目后,部署完成后,刷新页面页面404

    1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...

随机推荐

  1. python spilt()函数的使用方法

    Python中的split()函数的用法 Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后 ...

  2. MongoDB + express + node + bootstrap 搭建多人博客

    这篇博客讲述如何搭建一个多人博客,需要一定的基础知识,用于思路整理和备忘. 第一步: 新建文件夹 blog ,结构如下: bin --- 可执行二进制文件,最终的启动接口. models --- 存储 ...

  3. B树和B+树对比,为什么MySQL数据库索引选择使用B+树?

    一 基础知识 二叉树 根节点,第一层的节点 叶子节点,没有子节点的节点. 非叶子节点,有子节点的节点,根节点也是非叶子节点. B树 B树的节点为关键字和相应的数据(索引等) B+树 B+树是B树的一个 ...

  4. Scroller类的使用总结

    Scroll类之所以不好理解是因为没有搞清楚View的绘制流程. 1)简单来讲 viewgroup重绘时依次会调用  dispatchDraw -- drawChild --child.compute ...

  5. 异步请求返回json对象

    后台mvc: var result = new { flag = ture, eMail = "949096562@qq.com"}; if (result.flag) { ret ...

  6. Value cannot be null. Parameter name: source

    下图主要想说.net抛错后的优先级, 错误1是根本原因,排第一位: 错误2里的方法包含了错误1,排第二位: 错误3就是整个Action了. 类似这样的错误,按照这样的顺序来解决bug,相信很受用.

  7. C语言函数调用简简介

    1.函数的声明: 在编写程序时,首先要对函数进行声明,然后对函数进行定义: 函数的声明是要让编译器知道函数的名称.参数.返回值类型等信息: 函数的定义是要让编译器知道函数的功能: 函数声明的格式由函数 ...

  8. Spring课程 Spring入门篇 3-2 Spring bean装配(上)之bean的生命周期

    课程链接: 本节主要讲了三大块内容 1 bean的生命周期概念 2 bean的初始化和销毁的三种方式对比(代码演练) 3 总结 1 bean的生命周期概念 1.1 bean的定义:xml中关于bean ...

  9. svg的基本图形与属性【小尾巴的svg学习笔记1】

    因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...

  10. scss牛刀小试:解决css中适配浏览器前缀问题

    在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...