在前端开发过程中,为了减少最后打包出来的体积,我们会用到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. @RequestMapping 用法详解之地址映射(转)

    这段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为application/js ...

  2. 基于操作系统原理的Linux 系统的安装

    一.实验目的 1.了解Linux操作系统的发行版本. 2.掌握Red Hat Linux 9.0的安装方法. (可用Red Hat Linux 5.0版本替代9.0版本) 3.了解Linux其他版本( ...

  3. @Transient的用法和格式化页面展示的数据格式

    一.Hibernate中:@Transient用法 用法1:使用@Transient这个注解添加表中不存在字段.将这个注解添加到自定义字段的get方法上 用法2:将该注解添加到定义该字段的头部即可,例 ...

  4. Flask基础(09)-->请求勾子函数

    什么是请求勾子? 为了让每个视图函数避免编写重复的功能代码,flask提供了通用设施的功能,就是所谓的勾子 那么请求勾子就是,在浏览器请求服务器资源的前后挂载相关的处理函数 请求勾子有什么作用? 作用 ...

  5. python使用代理ip

    python使用代理的方法有两种 1. #先创建代理ip对象 proxy_support = urllib.request.ProxyHandler({'https':'117.64.149.137: ...

  6. Python爬虫:获取JS动态内容

    经过一段时间的python学习,能写出一些爬虫了.但是,遇到js动态加载的网页就犯了难.于是乎谷歌.百度,发现个好介绍http://www.jianshu.com/p/4fe8bb1ea984 主要就 ...

  7. [LeetCode] 824. Goat Latin

    Description A sentence S is given, composed of words separated by spaces. Each word consists of lowe ...

  8. 『开发技术』Ubuntu与Windows如何查看CPU&GPU&内存占用量

    0 序·简介 在使用Ubuntu或者Windows执行一些复杂数据运算时,需要关注下CPU.GPU以及内存占用量,如果数据运算超出了负荷,会产生难以预测的错误.本文将演示如何用简单地方式,实时监控Ub ...

  9. JVM(三)初始化

    字节码指令和符号引用.直接引用 1.主动引用和被动引用 主动引用:虚拟机规定只有满足四个情况的的情况下,才会进行主动引用.    被动引用:除过四种情况的引用是被动引用.     只有主动引用才会初始 ...

  10. 你真的懂Spring Java Config 吗?Full @Configuration vs lite @Bean mode

    Full @Configuration和lite @Bean mode 是 Spring Java Config 中两个非常有意思的概念. 先来看一下官方文档关于这两者的相关内容: The @Bean ...