因为项目用到了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. java源文件组成部分

    class HelloWorld{ public static void main(String[ ] args) { System.out.print("HelloWorld!!!&quo ...

  2. numpy初用

    import numpy as np for k,v in stat.iteritems():     print k     v.sort()     #v = v[len(v)*3/100:len ...

  3. input元素的blur事件与定位在其上面的元素的点击（click）事件冲突的解决方法

    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...

  4. RedHat7配置静态IP

    1.验证网络管理器状态,Active: active (running)表示正在运行,一般RHEL7都默认安装了. [root@localhost ~]# systemctl status Netwo ...

  5. jeecg3.8popup弹出窗口触发失去焦点事件，引发验证弹窗，影响体验问题的解决办法

    在初始化表单的代码中添加以下加粗部分,有几个popup就定义几个标志位,主要是防止第一次失去焦点时候的弹窗(此时还未来得及选择),提交表单的时候还是会正常校验的. //popup触发失去焦点事件,设置 ...

  6. __getattr__,__getattribute__????

    class Foo(object): def __getattr__(sel,item): print('y') def __getattribute(self,item): print('x') o ...

  7. MySQL累加值时,考虑到值有为NULL的情况.

    一个字段,表示报名人数,默认为null,经考虑,以以下sql执行加1: ) where id='xxx'

  8. List之Sort使用

    void TestListSort(){ List<string> st = new List<string> (); st.Add ("abcd"); s ...

  9. 【工作中学习1】两个设计模式：Singleton（单例）和 Adapter（适配器）

    好久没有写自己的学习小博客,罪过罪过..最近本菜鸟在项目中接触到经常用到的设计模式,首先是Singleton(单例),这个相信大家都会用到很多,所以自己用代码实现一下,有助于自己学习理解,如有不对,请 ...

  10. PHP判断变量是否小数并对小数进行处理

    /*判断是否为小数demo*/$a = 1.2; if(is_int($a)){ echo "$a 是整数!"; }else{ echo "$a 不是整数!"; ...