如何在使用cdn在vue中引入element

平时开发环境都使用npm惯了，那么正式的上线环境，如何使用cdn引入element呢

小编这里用的vue-cli工具，原生的vue大家自行去探索

使用cli工具以后，会有一个public文件夹

找到下面的index.html

 这个位置引入css

可能此时你的版本与我的不一样，那么这个版本要去element官网找

样式引入完了，接下来要引入element组件库

我们知道组件库这个时候要在vue的app挂载这个页面中引入

此时就要找到app.vue这个vue页面

此时对应版本也到element官网找

然后接下来的步骤

在vue中新建一个vue.config.js（如果你有这个文件，直接在里面新添加右边内容就行）据说有三种写法，这里只给第一种剩下几种到文章末尾去另一篇文章找

// 写法1: 在configureWebpack配置externals 

// 写法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'
        }
    }
}

 

好了，然后回到项目

npm run serve

就成功了

 

参考：https://juejin.cn/post/6898907771362607118