vue项目中引用cdn资源与项目配置_vue的cdn是干嘛的

一、CDN是什么

CDN（内容分发网络）本身是指一种请求资源的方式。说白了就是在本地，通过script头去请求对应的脚本资源的一种方式。我在这里要说的就是直接引用 或者下载Vue.js放在本地，进行项目开发的方式。而不是通过npm包管理工具去下载vue包。
目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的

二、配置

下面，以引入element-ui、vue、vuex、vue-router、axios为例，说明处理流程。
1

1. 在index.html中引入cdn资源.

  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js" rel="stylesheet" type="text/javascript"></script>
1
2
3
4
5
6

如图：
2. 在build目录下的webpack.base.conf.js文件中module.exports下级增加externals：{}，代码如下：

 externals: {
   'vue': 'Vue',
   'vue-router': 'VueRouter',
   'element-ui': 'ELEMENT',
   'vuex': 'Vuex',
   'axios': 'axios',
 },
1
2
3
4
5
6
7

如图：
3. 在main.js中去掉原有的引用或者之前的引用

// import Vue from 'vue'
// import router from './router'
// import 'element-ui/lib/theme-chalk/index.css';
// import ElementUI from 'element-ui';
// import Vuex from 'vuex'
// import axios from 'axios'
// Vue.use(Vuex)
// Vue.use(ElementUI);
1
2
3
4
5
6
7
8

如图：
注：如果不注释掉/删除之前的引用可能会ESLint语法检出报错