【vue/webpack3】【element-ui】引入CDN资源

news/2024/7/10 1:09:31 标签: vue, webpack, elementui

elementUI直接通过npm安装被打包会导致打包后的js文件过大,部署在性能较低的服务器时,对加载非常不友好。因此,想要通过cdn引入,不打包到dist文件,并且不影响开发环境以CMD、AMD或者window/global全局等方式进行使用

借助externals(从打包的bundle文件中排除依赖)配置项

webpack.base.conf.js中配置

module.exports = {
  ...
  // 注册后打包时不会打包到app.js,运行时也会去window域下调用
  externals: {
    vue: 'Vue',
    'element-ui': 'ELEMENT'
  },
  ...

main.js中引入方式不变

// webpack 会检测这些组件是否在 externals 中注册
// 如果注册则不会将其打包到 app.js 中
import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

index.html 中引入cdn

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
    <title>myproject</title>
  </head>

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
  </body>
</html>

注意事项

记得去掉main.js文件中对elementui css的引入

// import 'element-ui/lib/theme-chalk/index.css'

http://www.niftyadmin.cn/n/1503310.html

相关文章

【centos7】【docker】安装启动

dockerdocker安装docker配置1、docker hub登录2、阿里云登录3、docker开启2375&#xff0c;提供外部访问接口docker-composedocker安装 检查内核版本大于3.10&#xff0c;uname -r 如果有的话&#xff0c;卸载旧版本&#xff08;未测试此步骤&#xff09; 卸载旧版本docker-en…

mysql可以存放100万吗_不同品质的普洱生茶,可以存放在一起吗?

很多普洱茶爱好者已知晓&#xff0c;普洱茶生茶和熟茶因制作工艺的不同&#xff0c;故茶性不同&#xff0c;滋味不同&#xff0c;口感不同&#xff0c;茶香也有较大差别&#xff0c;因此&#xff0c;普洱茶生茶和熟茶在存储的时候要分开存放。那么如果同是普洱生茶也可以放到同…

【centos】【docker】【nacos】

nacos 创建数据库 CREATE database if NOT EXISTS nacos_config default character set utf8mb4 collate utf8mb4_unicode_ci; use nacos_config;/******************************************/ /* 数据库全名 nacos_config */ /* 表名称 config_info */ /**********…

Oracle学习笔记一——什么是数据库?

数据库 数据库(Data Base&#xff0c;DB) 什么是数据库 数据库是指长期存储在计算机内有组织的、可共享的数据集合。数据库中的数据按一定的数据模型组织、描述和存储&#xff0c;具有较小的冗余度、较高的数据独立性和易扩展性&#xff0c;并可为各种用户共享。 数据库是被长期…

ios带嗅探器的浏览器_60秒带你了解JavaScript

JavaScrip的简称“js” 是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的高级编程语言。虽然它是作为开发前端页面的脚本语言而出名的&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript 基于原型编程、多范式的动态脚本语言&#xff0c;并且支…

【centos】【docker】【sentinel】规则持久化至【nacos】

控制台 docker pull bladex/sentinel-dashboarddocker run -dit \ --name sentinel-nacos \ -p 8858:8858 \ --restartalways \ -e NACOS_SERVER_ADDR[ip]:8848 \ -e NACOS_USERNAMEnacos \ -e NACOS_PASSWORDnacos \ -e NACOS_NAMESPACEpublic \ -e NACOS_GROUP_IDSENTINEL_G…

mysql与java数据类型对照

类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR LN VARCHAR java.lang.String 12 CHAR N CHAR java.lang.String 1 BLOB LN BLOB java.lang.byte[] -4 TEXT 65535 VARCHAR java.lang.String -1 …

士林变频器面板如何调速度_Shihlin士林变频器SA3系列产品型号说明及功能介绍...

主要特色■SVPWM, VIF控制&#xff0c;VIF闭环控制(VFPG),泛用磁通向量控制,无速度感测向量控制(SVC) ,闭环向量控制(FOCPG) ,转矩控制( TQCPG )■支持多路模拟量信号输入 ( -10V~10V ; 0~10V ;0~5V ; 4~20mA)■支持两路模拟量输出可搭配 上位机使用■输出频率最高可达650HZ■内…