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

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


<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/[email protected]/lib/theme-chalk/index.css" />
    <title>myprojecttitle>
  head>

  <body>
    <div id="app">div>
    
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js">script>
    <script src="https://unpkg.com/[email protected]/lib/index.js">script>
  body>
html>

注意事项

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

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

你可能感兴趣的:(运维,前端,vue,webpack,elementui)