element-ui在webpack里怎样才能不被打包

项目中这样写是过得好好的：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

但这样写的话webpack -p生成出来的文件比较大，而且没次编译都较慢，所以现在想把vue和element-ui用script的方式引入，那样可以避开文件体积大和编译慢的问题了，webpack上这样改了一下：
externals: {

    'vue': 'Vue',    
    'element-ui': 'ElementUI'
},

这样生成出来的文件不包含vue和element-ui了，但页面却运行出错：
ElementUI is not defined

请问怎样解决呢？

阅读 15.7k

7 个回答

得票最新

externals: {

'vue': 'Vue',    
'element-ui': 'ELEMENT'

},
请作如上修改，

我看很多人问这个问题，所以我干脆写了一个demo: 地址
注意是element-ui-cdn 分支
需要操作是: 地址
文档:地址

这样的话，Vue可以正常使用吗

使用webpack.DllPlugin或者webpack.optimize.CommonsChunkPlugin
webpack.DllPlugin可以看我的vue_template
webpack.optimize.CommonsChunkPlugin自己百度去吧

其实感觉是堕了webpack的坑，索性不把element-ui写到webpack.config里去，main.js里也不写element-ui相关的信息，包括Vue.use(ElementUI)。直接在页面引用js和css解决了问题

我也试过，但是各种变量报错不存在，还不如直接不用npm引入，直接使用script引入，另外注意script引入vue.js要在element前引入

撰写回答

推荐问题