VueCLI3.x通过CDN加载jQuery axios的配置

在运用中发现，vuecli3.x搭建的项目中CDN加载JQuery,axios等的配置有点不一样。所以分享一下。

1.加载配置的第一步首先都是一样的 将第三方包引入到public下的index.html文件中

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

2.配置文件 VueCLI2中

新建webpack.config.js 代码如下
module.exports = {
 //... 
 externals: { 
            'jquery': '$', 
            'axios':'axios' 
            };
}

3.VueCL3中

新建 vue.config.js
module.exports = {
    // 修改webpack的配置
    configureWebpack: {
        // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
        externals: {
             'jquery' : '$',
            'axios':'axios'
        }
    }
}

注意：格式 ‘aaa’:‘ccc’,左边代表要引入资源包的名字，右边代表该模块在外面使用引用的名字
例如 jQuery在外面的引用就为$

3.这样就可以直接引用

import $ from 'jquery';

4.打包 这样你就会看到js文件中容量小一些啦

npm run build

当中用到参考文档的资料网站
cdn: https://www.bootcdn.cn/axios/
Vue CLI3:
https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式
webpack:
https://webpack.docschina.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx