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。具体信息如下：

原因：未在 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 ...。具体信息如下：原因：没有在 webpack的externals 中定义 vue。

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

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

原因：项目使用了 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')