Vue项目CDN引入ElementUI

正确打开方式

修改 public/index.html：

<!DOCTYPE html>
<html lang="en">
  <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">
    <link rel="icon" href="<%= BASE_URL %>icon-16.ico">
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Element CDN</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
	<!-- 在引入 ElementUI 之前引入 Vue，会注入全局变量 Vue  -->
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <!-- 引入 ElementUI 组件库，会注入全局变量 -->
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  </body>
</html>

修改 vue.config.js：

// 写法1: 在configureWebpack配置externals 
module.exports = {
    // configureWebpack 值为对象，会通过 webpack-merge 合并到最终的配置
    configureWebpack: {
        externals: {
            // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
            'vue': 'Vue',
            // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
            // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
            'element-ui': 'ELEMENT'
        }
    }
}

// 写法2：在configureWebpack配置externals
module.exports = {
    // configureWebpack 值为函数，参数 config (被解析的配置)，可直接赋值修改
    configureWebpack: config => {
        config.externals = {
          'vue': 'Vue',
          'element-ui': 'ELEMENT'
        }
    }
}

// 写法3：在 chainWebpack 配置 externals. 注意：不要写成 config.externals = {...}
module.exports = {
    // chainWebpack 只能是函数，参数 config(基于 webpack-chain 的 ChainableConfig 实例)
    chainWebpack: config => {
        config.externals({
            'vue': 'Vue',
            'element-ui': 'ELEMENT'
        })
    }
}

TIPS：

注意区分 configureWebpack和 chainWebpack。参考官方文档。
常用 CDN：jsdelivr，unpkg。生产环境，建议使用指定版本的CDN文件。
webpack 外部扩展 externals，参考 v4中文文档、最新版本文档。

可能遇到的报错

（1）Cannot read property 'prototype' of undefined。具体信息如下：

Vue项目CDN引入ElementUI 原因：未在 element之前引入 vue。

    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js">

（2）Injection "dropdown" not found ...。具体信息如下： Vue项目CDN引入ElementUI 原因：没有在 webpack的externals 中定义 vue。

config.externals({
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
})

（3）you can run: npm install --save element-ui/lib ...。具体信息如下：

Vue项目CDN引入ElementUI

原因：项目使用了 element-ui按需引入的插件babel-plugin-component，将原始引入做了转换，导致定义的element-ui不会被匹配到。

// babel-plugin-component 转换示例
// Converts
import { Button } from 'element-ui' 
// to (转换有利于减少副作用，更好的 tree-shaking)
var button = require('element-ui/lib/button')
require('element-ui/lib/button/style.css')

修改babel.config.js，babel-plugin-component 也可以npm uninstall。

Vue项目CDN引入ElementUI

为什么会用到 babel-plugin-component呢？一般我们都是命令行的方式使用Vue CLI，新来的小朋友用了 Vue CLI的图形化界面，增加这些东西。?

为什么不按需引入ElementUI呢？项目中用到了 ElementUI的很多组件，所以就没考虑按需引入。

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。