vue-cli打包vue、vue-router、echarts、axios 、jq 引入外部cdn

为了减少vendor.js体积，同时提高webpack打包编译速度，引入cdn外部资源

在index.html引入资源文件：

    <!-- 先引入 Vue -->
    <!--开发环境-->
    <!--  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> -->
    <!--生产环境-->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.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/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在webpack.config.js中配置externals：

module.exports = {
  externals: {
     'vue': 'Vue',
     'vue-router': ‘VueRouter’
     'jquery': 'jQuery',
     'axio':'axios',
     'echarts': 'echarts',
  },
  ...
}

针对使用bootstrap这样的ui库，直接index.html引入cdn文件，不必导入，但是注意版本不同可能导致样式引入错乱。

=>不要引入Vue-Router cdn的全部变量是 VueRouter

=> main.js这里引入进来的是你配置路由的文件路径

import router from './router'

=> 这里引入进来的才是main.js引入进来的路由对象

import Router from 'vue-router'