关于在vue-cli脚手架中使用CDN引入element-ui不成功的坑
在前端开发过程中,为了减少最后打包出来的体积,我们会用到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不成功的坑的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
随机推荐
- XStream实现javabean和xml、json转化
xStream转换XML.Json数据 xStream可以轻易的将javaBean对象和xml相互转换,修改某个特定的属性和节点名称,而且也支持json的转换. maven依赖: 1 <depe ...
- (转)阿里云CentOS 7下配置及使用mysql
一.安装 1 正确的安装方法: 众所周知,Linux系统自带的repo是不会自动更新每个软件的最新版本(基本都是比较靠后的稳定版),所以无法通过yum方式安装MySQL的高级版本.所以我们需要先安装带 ...
- spring与logstash整合,并将数据传输到Elasticsearch
logstash是一个开源的数据收集引擎,支持各种输入选择,能够同时从多个来源采集数据,将数据转发到想存储的“库”中,例如,可以转发存储到Elasticsearch,也可以转发到kafka等消息中间件 ...
- java Mail如何发送邮件
1.应用场景:在系统需要发送与用户相关的消息时,而用户不在线,可以采取发送邮件的方式,使用户了解最新的系统情况 或者发送验证码等验证场景 2.实验环境 主要使用mail.jar和activation. ...
- opencv边缘检测
人眼怎么识别图像边缘? 比如有一幅图,图里面有一条线,左边很亮,右边很暗,那人眼就很容易识别这条线作为边缘.也就是像素的灰度值快速变化的地方. sobel算子 sobel算子是一个离散差分算子. 图像 ...
- 阿里云安装zk并连接javaAPI测试
1.安装 可参照Ubuntu 搭建Zookeeper服务进行安装并启动. 2.注意 阿里云环境开放2181端口 2.1 查看已开放端口: firewall-cmd --permanent --zone ...
- H5刮刮卡效果
效果图: 核心就是使用ctx.globalCompositeOperation = 'destination-out'; 全部代码: <!DOCTYPE html> <html> ...
- Vue:获取当前定位城市名
实现思想:通过定位获取到当前所在城市名: 1.在工程目录index.html中引入: <script type="text/javascript" src="htt ...
- Java-Thread01之创建线程
------  ...
- k8s运维记 - 如何让部署到k8s的kong网关托管自定义静态资源?
目的 使用kong作为目录/data/reports的静态资源服务器,为了测试,已于目录/data/reports下创建文件report.html,如下: <html> <head& ...