首先在public目录下的index.html中引入对应第三方库的cdn地址:
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
注意,cdn地址的引入要放在 <div id="app"></div> 之前。即在项目加载之前引入cdn地址文件;
第二步,在vue.config.js中的configureWebpack配置下,增加:
config.externals = {
// CDN 的 Element 依赖全局变量 Vue, 所以 Vue 也需要使用 CDN 引入
'vue': 'Vue',
// 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的,
// 不去 node_modules 中找,而是去找 全局变量 ELEMENT
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex'
}
第三步,注释掉原代码中引入的vue,vuex,vue-router,elementui等;
第四步,重启项目,鼓掌撒花。