原文地址：http://www.cnblogs.com/lvhw/p/8018711.html
我们要将 vue、 vue-router、 vuex、element-ui 从 vendor.js 中分离出来，使用CDN资源引入。国内的CDN服务推荐使用 BootCDN。国外不是很好用。。。
-
首先在模板文件
index.html中添加以下内容：... <head> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css"> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script> <!-- built files will be auto injected --> </body> -
修改
build/webpack.base.conf.js。关于externals配置项请自行查阅相关资料。module.exports = { ... externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT' } ... } -
修改
src/router/index.js// import Vue from 'vue' import VueRouter from 'vue-router' // 注释掉 // Vue.use(VueRouter) ... -
修改
src/store/index.js... // 注释掉 // Vue.use(Vuex) ... -
修改
src/main.jsimport 'babel-polyfill' import Vue from 'vue' import App from './App' import axios from 'axios' import store from './store' import router from './router' import {sync} from 'vuex-router-sync' import ELEMENT from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ELEMENT) Vue.prototype.$http = axios sync(store, router) /* eslint-disable no-new */ new Vue({ el: '#app', store, router, template: '<App/>', components: { App } })注意！这里
element-ui变量名要使用ELEMENT，因为element-ui的 umd 模块名是ELEMENT