首先遇見的第一個坑是Element UI依賴於vue，若是cdn引入Element UI，vue也得使用一份cdn引入
接下來在index.html中cdn進行引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="Shortcut Icon" href='./static/img/favicon.ico' type="image/x-icon" /> <meta name="keywords" content=""> <meta name="description" content=""> <title>xxx平台</title> <style> .el-message{ top:60px !important; } </style> <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://unpkg.com/swiper@5.3.6/css/swiper.css"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script src="//at.alicdn.com/t/font_2020075_kwfmx8jsn5.js"></script> <!-- vue --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script> <!-- vue-router --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script> --> <!-- element-ui --> <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script> <!-- swiper --> <script src="https://unpkg.com/swiper@5.3.6/js/swiper.js"></script> <!-- vue-awesome-swiper這個文件一定要引入，否則的話swiper無法正常使用 --> <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js"></script> <script type="text/javascript"> Vue.use(window.VueAwesomeSwiper); </script> </body> </html>
就是在main.js中去掉Element UI
// 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' //element-ui 引入 // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' // Vue.use(ElementUI) Vue.config.productionTip = false //引入對項目初始文件 import './assets/css/reset.css' ... new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
然后在webpack.base.conf.js設置
output: { ... }, externals : { 'vue':'Vue', // 'vue-router': 'VueRouter', 'element-ui':'ElementUI', 'swiper': 'swiper' },
這樣這是完成后運行 npm run build 可以明顯看見打包后首屏文件vendor變小。
這樣設置后直接在本地運行項目npm run dev 也是沒有問題可行的