在前端开发过程中,为了减少最后打包出来的体积,我们会用到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. 使用回车键执行input框事件

    html: <input type="text" class="search-data-input" placeholder="请输入关键词&q ...

  2. JavaScript DOM 编程艺术

    最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScr ...

  3. Java线程池基础

    目录: 一.线程池概述 二.线程池参数 三.线程池的执行过程 四.线程池的主要实现 五.线程池的使用 六.线程池的正确关闭方式 七.线程池参数调优 一.线程池概述 1.线程池类 目前线程池类一般有两个 ...

  4. 1,eclipse导入项目jdk版本不一样解决方案 2,java报javax.servlet.jsp cannot be resolved to a type

    一:eclipse导入项目jdk版本不一样解决方案 参考博文: https://www.cnblogs.com/chenmingjun/p/8472885.html 选中项目右键 --> Pro ...

  5. gym102346题解

    B Buffoon 判断最大值是不是第一个数,签到题. H Hour for a Run 输出\(n*m\)的\(10\%\)到\(90\%\),签到题,注意别用浮点数和ceil,有精度问题. M M ...

  6. hadoop之mapreduce详解(进阶篇)

    上篇文章hadoop之mapreduce详解(基础篇)我们了解了mapreduce的执行过程和shuffle过程,本篇文章主要从mapreduce的组件和输入输出方面进行阐述. 一.mapreduce ...

  7. idea 启动springboot项目报找不到主类

    今天搭建的一个新springboot项目,运行启动类时控制报找不到主类错误 解决方法: 在idea控制台输入mvn clean install命令

  8. flexible.js分析--JavaScript

    //立即执行函数 (function flexible(window, document) { // 获取的html 的根元素 var docEl = document.documentElement ...

  9. .Net Core 商城微服务项目系列(七):使用消息队列(RabbitMQ)实现服务异步通信

    RabbitMQ是什么,怎么使用我就不介绍了,大家可以到园子里搜一下教程.本篇的重点在于实现服务与服务之间的异步通信. 首先说一下为什么要使用消息队列来实现服务通信:1.提高接口并发能力.  2.保证 ...

  10. SpringBootSecurity学习(21)前后端分离版之OAuth2.0非对称加密

    JWT转换器 前面的例子中,都是在授权服务配置类中配置了一个很简单的jwt转换器,如下: 可以看到我们只用setSigningKey方法配置了一个秘钥,这里使用的是简单的对称加密的方式来加密jwt内容 ...