vue项目中引用cdn资源与项目配置

一、CDN是什么

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

二、配置

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

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>

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

externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'vuex': 'Vuex', 'axios': 'axios', },

如图： 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);

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