在前端开发过程中,为了减少最后打包出来的体积,我们会用到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. 蓝桥杯 algo122 未名湖的烦恼 简单题

    #include <iostream> using namespace std; int m, n, ans; void solve(int m, int n, int cnt) { &a ...

  2. Debezium SQL Server Source Connector+Kafka+Spark+MySQL 实时数据处理

    写在前面 前段时间在实时获取SQLServer数据库变化时候,整个过程可谓是坎坷.然后就想在这里记录一下. 本文的技术栈: Debezium SQL Server Source Connector+K ...

  3. 基于python的scrapy环境搭建

    0.1安装python软件 32位机的电脑安装python-3.6.3.exe 64位机的电脑安装python-3.6.3-amd64.exe 0.1.1 python环境搭建 执行安装程序 选择Ad ...

  4. 利用Travis CI+GitHub实现持续集成和自动部署

    前言 如果你手动部署过项目,一定会深感持续集成的必要性,因为手动部署实在又繁琐又耗时,虽然部署流程基本固定,依然容易出错. 如果你很熟悉持续集成,一定会同意这样的观点:"使用它已经成为一种标 ...

  5. OpenGl 导入读取多个3D模型 并且添加鼠标控制移动旋转

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11627508.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

  6. SUSE CaaS Platform 4 - 使用 Ceph RBD 作为持久存储(动态)

    图1 架构图 图2 各存储插件对动态供给方式的支持状况 1.所有节点安装 # yum install ceph-common 复制 ceph.conf 到 worker 节点上 # scp admin ...

  7. 3D虚拟环境中的选择技术分类

    我们在3D虚拟环境(Virtual Environment, VE)中需要完成的操作有3种:选择物体,操纵(改变)物体,移位(locomotion).这里来总结一下3D VE中的选择技术的种类.本文根 ...

  8. Linux下beego及beego相关插件安装

    Linux下beego及beego相关插件安装 1.下载及配置go环境看见链接: http://golang.org/dl/ 网盘:链接: https://pan.baidu.com/s/1MveUM ...

  9. php企业微信获取员工userid以及打卡信息

    企业微信可以通过部门列表获取部门下的员工信息,从而获取到员工的userid //首先获取需要的access_token $access_token = json_decode($this->ge ...

  10. uniapp 用户拒绝授权再次调起授权-语音识别、微信地址、附近地址

    小程序重构,采用 uniapp 框架.记录一下踩过的坑.关于用户拒绝再次调起授权,及如何识别语音识别.微信地址.附近地址的处理. 语音识别 组件 语音识别,小程序只有录音功能,若要识别录音文件,常规做 ...