怎么把 iview在 webpack 中以 externals 方式引入?
本文介绍了怎么把 iview在 webpack 中以 externals 方式引入?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我在 index.html 引入了 iview 标签：
<script type="text/javascript" src="iview.js"></script>
在 WebPack 中加入了：
externals: {
iview: 'iview'
},结果运行后报错：
vendors.js:13908 TypeError: _vue2.default is not a constructor
at Object._loadingBar2.default.newInstance (iview.js:22714)
at getLoadingBarInstance (iview.js:4493)
at _update (iview.js:4503)
at Object.start (iview.js:4534)
at main.js:33787
at iterator (vendors.js:13946)
at step (vendors.js:13829)
at runQueue (vendors.js:13837)
at HTML5History.confirmTransition (vendors.js:13975)
at HTML5History.transitionTo (vendors.js:13877)
abort @ vendors.js:13908
update:
如果把 Vue 也加入到 externals 中是可以的，为什么会这样？
解决方案
<head>
<meta charset="utf-8">
<title>segmentfault-1010000009974881</title>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
</head>
<body>
<div id="app">
</div>
<script src="/dist/build.js"></script> // 包含Vue
</body>不知楼主的代码结构是否是这样？
如果是这样，引入个别的iview组件会报错。
// @TODO 为何会报错
// iview组件有多处引入import Vue from 'vue'; 用来实例化
// /Users/huixisheng/x/do/segmentfault-1010000009974881/node_modules/iview/src/components/base/notification/index.js:
// 1 import Notification from './notification.vue'; message/notice 有用到
// 2: import Vue from 'vue';
// 3
// 4 Notification.newInstance = properties => {
//
// /Users/huixisheng/x/do/segmentfault-1010000009974881/node_modules/iview/src/components/date-picker/picker.vue:
// 30: import Vue from 'vue';
//
// /Users/huixisheng/x/do/segmentfault-1010000009974881/node_modules/iview/src/components/loading-bar/loading-bar.js:
//
// 2: import Vue from 'vue';
// 3
// 4 LoadingBar.newInstance = properties => {
//
// /Users/huixisheng/x/do/segmentfault-1010000009974881/node_modules/iview/src/components/modal/confirm.js:
// 1: import Vue from 'vue';
//
// /Users/huixisheng/x/do/segmentfault-1010000009974881/node_modules/iview/src/locale/index.js:
// 4: import Vue from 'vue';
// this.$Message.info('测试iView是否生效')所以使用以上组件需要把Vue加入externals中，同时Vue在iview之前加载。
相关的例子: https://github.com/huixisheng...
这篇关于怎么把 iview在 webpack 中以 externals 方式引入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
