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

最新推荐文章于 2024-05-08 12:36:30 发布

lorogy

最新推荐文章于 2024-05-08 12:36:30 发布

阅读量853

点赞数

分类专栏：运维前端文章标签： vue webpack elementui

本文链接：https://blog.csdn.net/lorogy/article/details/117018106

版权

运维同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

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'

lorogy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue/webpack3】【element-ui】引入CDN资源

elementUI直接通过npm安装被打包会导致打包后的js文件过大，部署在性能较低的服务器时，对加载非常不友好。因此，想要通过cdn引入，不打包到dist文件，并且不影响开发环境以CMD、AMD或者window/global全局等方式进行使用借助externals（从打包的bundle文件中排除依赖）配置项webpack.base.conf.js中配置module.exports = { ... externals: { vue: 'Vue', 'element-ui':.
复制链接

扫一扫

专栏目录