在前端开发过程中,为了减少最后打包出来的体积,我们会用到cdn引入一些比较大的库来解决。

常见我们引入的element-ui库,在最近使用cdn引入时,无论如何都引入不成功,其他的如Vue、vue-router、vuex、axios、echarts、crypto-js等等都能成功,就是element-ui死活不成功。在经过长达一个小时的苦思冥想后,在.babelrc文件中发现了蹊跷。

在之前配置element-ui时,根据官网提供的方法,配置了按需加载,如下:

 {
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

,然后果断把element-ui的按需加载移除掉,然后一切就OK了!!!!删除以后如下:

 {
"presets": [["@babel/preset-env", { "modules": false }]]
// "plugins": [
// [
// "component",
// {
// "libraryName": "element-ui",
// "styleLibraryName": "theme-chalk"
// }
// ]
// ]
}

问题不大,就是之前自己根据官网配置的,忘记了,留下一笔,望大家少跳坑。

关于在vue-cli脚手架中使用CDN引入element-ui不成功的坑的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  3. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  4. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  5. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

  6. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  7. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  8. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  9. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

随机推荐

  1. [C++] 头文件中不要用using namespace std

    先总结下: 1. using namespce std:尽量不要(或者强硬一点,不许)在头文件中使用. 解析: 不让这么用,主要原因就是防止名字重复(即自定义变量名和std中名字重复),因为头文件会被 ...

  2. C++基础之顺序容器

    顺序容器简介: 顺序容器类型 描述 vector 可变大小数组,支持快速访问,在尾部之外的地方插入或删除时可能很慢 deque 双端队列.支持快速访问,在头尾插入删除会很快. list 双向列表.只支 ...

  3. Python集训营45天—Day07 (面向对象编程进阶)

    目录 1. @property装饰器 2. 魔法方法 3. 类属性和实例属性 4.静态方法和类方法 5. 单继承和多继承 6. 多态 7. del 方法 序言:上个章节我们了解了面向对象的基础知识,这 ...

  4. jenkins自动化部署项目3 --设置用户

    我直接设置的admin ,jenkins可以新建多个用户,并赋予不同的权限(TODO) 等后续需要严格规范操作人的时候再补充

  5. mybatis 配置之<typeAliases>别名配置元素设置

    一.方式一:使用typeAlias <typeAliases> <typeAlias alias="User" type="com.**.entity. ...

  6. 基于Python协同过滤算法的认识

    Contents    1. 协同过滤的简介    2. 协同过滤的核心    3. 协同过滤的实现    4. 协同过滤的应用 1. 协同过滤的简介 关于协同过滤的一个最经典的例子就是看电影,有时候 ...

  7. Nodejs 发送邮件 激活邮箱

    1. 安装nodemailer npm install nodemailer 项目中引入nodemailer var nodemailer = require('nodemailer'); 2.QQ邮 ...

  8. 基于elasticsearch的自定义业务告警的设计思路

    A系统与B系统之间有很多接口交互,但是有一段时间接口经常报错,作为开发如果不能第一时间知道问题且及时解决的话就会收到业务投诉,当月绩效凉凉. 如果你也有这种场景,那么你就需要一个及时告警的功能. 实现 ...

  9. P3515 [POI2011]Lightning Conductor

    首先进行一步转化 $a_j \leq a_i + q - sqrt(abs(i - j))$ $a_i + q \geq a_j + sqrt(abs(i-j))$ 即 $q = max (a_j + ...

  10. locate,find

    locate:非实时查找,模糊匹配,查找是根据全系统文件数据库进行的,可以使用updatedb命令来手动生成数据库 find:实时查找,精确匹配,支持众多查找标准,遍历指定目录中的所有文件完成查找,速 ...