# 在根目录 index.html 使用 cnd 节点导入
因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>chenbz</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>
</html>
# 根目录下build/webpack.base.config.js中添加externals
cdn 版本的 element-ui 设置的全局变量是 ELEMENT
......
module.exports = {
......,
externals: {
'vue' : 'Vue',
'element-ui' : 'ELEMENT',
}
};
# Main.js 中import … from …与Vue.use(…)就可以去掉了，若没去掉webpack还是会把对应的依赖进行打包
因为 vue 与 element-ui 用 cnd 节点导入，所以在 main.js 中 import 的 vue 和 element-ui 可以注释掉（如果没有注释掉，webpack还是会把对应的依赖进行打包）
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
import App from './App'
import router from './router'
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
// render: h => h(App),
router,
components: { App },
template: '<App/>',
});
# 接下来 npm run build 成功后你会发现 vendor.js 小了许多
