描述
请求模块中单独使用Message,如下
import { Message } from 'element-ui'
具体描述
element-ui按需引入,在请求模块中,单独引入Message
,请求500时,发现打印不出信息,控制台提示
ReferenceError: _Message is not defined
但是,请求正常时,可以正常弹出信息的
原因
通过查看编译后的代码,发现在请求模块中message有两个(_message和_message2),请求正常时,使用的时正确的message(_message2),请求异常使用另外一个message(_message),所以弹不出来
- 导入
var _message = _interopRequireDefault(__webpack_require__(/*! element-ui/lib/theme-chalk/message.css */ "./node_modules/element-ui/lib/theme-chalk/message.css"));
__webpack_require__(/*! element-ui/lib/theme-chalk/base.css */ "./node_modules/element-ui/lib/theme-chalk/base.css");
var _message2 = _interopRequireDefault(__webpack_require__(/*! element-ui/lib/message */ "./node_modules/element-ui/lib/message.js"));
- 请求正常
(0, _message2.default)({
message: res.message || 'Error',
type: 'error',
duration: 5000
});
- 请求异常
_Message({
message: 'Error',
type: 'error',
duration: 5000
});
解决
导入之后,使用其它变量名接收下,避免使用错误
import { Message } from 'element-ui'
const _Message = Message
// ...
_Message({
message: 'Error',
type: 'error',
duration: 5000
})
编译后
const _Message = Message
编译之后变为,正确取出Message组件缓存到_Message上,后面使用可以保证不会出错
var _Message = _message2.default;