vue 项目iview使用视图组件打包后报错

Question

我在vue项目中使用了iview插件，用page，select等iview的组件都没有问题，但是使用Modal,Message的视图组件就会报错，应该如何解决呢？

这是因为this.$Message.warning()中视图组件没定义所报的错

import 'babel-polyfill'
import './assets/css/reset.styl'
import './assets/css/theme-default.styl'
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import {
  i18n
} from '@/locale'
import store from '@/store'
import router from './router'
import axios from '@/apis/http/axios.js'
import commonHttp from '@/apis/http/commonHttp'
import _P from '@/assets/js/public'
import HappyScroll from 'vue-happy-scroll'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import {Message,Spin,Page,Switch,Upload,Select,Slider,CheckboxGroup,Modal,Checkbox} from 'iview';

import 'vue-happy-scroll/docs/happy-scroll.css';

Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(_P)
Vue.use(HappyScroll)
Vue.use(iView)
Vue.prototype.axios = axios
Vue.prototype.commonHttp = commonHttp
Vue.prototype.$Message = Message
Vue.prototype.$Spin = Spin
Vue.prototype.$Page = Page
Vue.prototype.$Switch = Switch
Vue.prototype.$Upload = Upload
Vue.prototype.$Select = Select
Vue.prototype.$Slider = Slider
Vue.prototype.$CheckboxGroup = CheckboxGroup
Vue.prototype.$Modal = Modal
Vue.prototype.$Checkbox = Checkbox


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  store,
  template: '<App/>',
  components: {
    App
  }
})

Answer 1

iview的消息组件有点特殊，export出来的是内置函数，需要通过函数方式调用

Vue.use(iView)
-------------------------------
Vue.use(iView, {
  transfer: true,
  size: 'large'
});
-------------------------------
Vue.prototype.$Message = Message
Vue.prototype.$Spin = Spin
Vue.prototype.$Page = Page
Vue.prototype.$Switch = Switch
Vue.prototype.$Upload = Upload
Vue.prototype.$Select = Select
Vue.prototype.$Slider = Slider
Vue.prototype.$CheckboxGroup = CheckboxGroup
Vue.prototype.$Modal = Modal
Vue.prototype.$Checkbox = Checkbox

你为什么用了三种不同方式引入？

Answer 2

你可以把报的错误发上来，才知道怎么去解决啊~