vue中cdn引入element-ui 如何在其他js中引入element-ui

Question

vue-cli

在index.html中采用 cdn 引入 element

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-i18n/7.6.0/vue-i18n.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>

webpack.base.conf.js 中代码如下

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'element-ui',
    'i18n': 'i18n',
},

现在想在自己写的js中使用element组件该怎么引用

import {Message} from 'element-ui'
Message(123);

这样用Message会报external "element-ui"?c60b:1 Uncaught ReferenceError: element is not defined错误

谢谢

Answer 1

cdn 版本的 element-ui 设置的全局变量是 ELEMENT

externals: {
  'element-ui': 'ELEMENT',
}

Answer 2

修改配置后还是提示Element未定义，是因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式

Answer 3

请问大佬解决了吗

Answer 4

您好，为什么这样改完之后还是会报错呢？

ELEMENT is not defined

Answer 5

使用cdn引入vue 和 element-ui 后，main.js中应该是什么样？

Answer 6

webpack.base.conf.js

externals:{

'vue': 'Vue',
'vue-router': 'VueRouter',
'axios':'axios',
'element-ui': 'ELEMENT'

},

//你要用的js
ELEMENT.Message({

showClose: true,
message: response.data.msg,
type: "error"

});

Answer 7

 externals: {
    vue: 'Vue',
    'element': 'element-ui'
  },

Answer 8

请问一下，在externals中定义的都会报undefined，是需要在webpack.base.conf.js引入定义的那些吗？

Answer 9

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'element-ui': 'ELEMENT',
   },