Vue项目CDN引入ElementUI

时间:2021-2-20 作者:admin

正确打开方式

修改 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="<%=%20BASE_URL%20%>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://www.geekschool.org/wp-content/uploads/2021/02/1613874124.553359.jpg"></script>
    <!-- 引入 ElementUI 组件库,会注入全局变量 -->
    <script src="https://www.geekschool.org/wp-content/uploads/2021/02/1613820315.1981206.jpg"></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:

  1. 注意区分 configureWebpackchainWebpack。参考官方文档
  2. 常用 CDNjsdelivrunpkg。生产环境,建议使用指定版本的CDN文件。
  3. webpack 外部扩展 externals,参考 v4中文文档最新版本文档

可能遇到的报错

(1)Cannot read property 'prototype' of undefined。具体信息如下:

    <script src="https://www.geekschool.org/wp-content/uploads/2021/02/1613874124.553359.jpg"></script>
    <script src="https://www.geekschool.org/wp-content/uploads/2021/02/1613820315.1981206.jpg">

(2)Injection "dropdown" not found ...。具体信息如下:

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')

修改babel.config.jsbabel-plugin-component 也可以npm uninstall

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。