vue-cli4.x中使用cdn引入vue全家桶、element、axios、map等等

使用npm安装完成的依赖打包完成后体积竟然达到了9.7MB，这才只是写了8个页面，所以考虑采用cdn引入

1、在vue.config.js中添加cdn配置

module.exports = {
	configureWebpack: {
    	//使用cdn
	    externals: {
	      'vue': 'Vue',
	      'vuex': 'Vuex',
	      'vue-router': 'VueRouter',
	      'axios':'axios',
	      'element-ui': 'ELEMENT',
	      "moment": "moment",
	      "AMap": "AMap",
	    }
  	},
}

这里需要注意的是，element的cdn模式名称已经变为：ELEMENT

2、修改index.html

  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.5.2/vue-router.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.16/dist/g2.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">

3、修改babel-plugin-component

如果在babel.config.js中配置了按需加载，也要去掉，我们也可以npm uninstall

4、遇到的报错

1、Cannot read property 'prototype' of undefined和ELEMENT is not defined

这个原因：是因为未在 element之前引入 vue，一定要确保和vue相关的放在最上面引入，然后在引入其他相关；不管是vue.config.js里面，还是在index.html里面

2、Injection "dropdown" not found ...

原因：没有在 webpack的externals 中定义 vue

configureWebpack: {
    //使用cdn
    externals: {
      'vue': 'Vue'
    }
  },

5、使用

在使用的时候也不用再import {Button} from 'element' 了，直接使用即可；

路由、vuex相关的，还是和之前一样