1、首先index.html 中配置cdn 引入

<!-- 引入样式 -->
<link rel="stylesheet" href="//cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

2、main.js 引用

import ElementUI from 'element-ui';
Vue.use(ElementUI)

3、build/webpack.base.conf.js 中定义声明

module.exports = {
...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
},

4、package.json 去除

"dependencies": {
//"element-ui": "^2.12.0",
//"vue": "^2.5.2",
//"vue-resource": "^1.5.0",
//"vue-router": "^3.0.1",
},

记住:element 要在vue 后面,否则报错。其他的包也类似,这样 页面加载速度不能说飞快,但有质的提升

vue 配置CDN加速的更多相关文章

  1. WP Super Cache+七牛云配置CDN加速,让你的网站秒开

    CDN加速网站是几乎所有的站长都在考虑的问题,CDN,全称是Content Delivery Network,即内容分发网络.所谓CDN加速,通俗的来说就是把原服务器上数据复制到其他服务器上,用户访问 ...

  2. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  3. 【转】七牛免费SSL证书,配置自定义域名CDN加速

    原文链接:https://excaliburhan.com/post/use-qiniu-ssl-and-cdn.html 申请七牛SSL证书 其实,七牛在很早之前就支持CDN使用https,但是他要 ...

  4. 申请免费域名并配置DNS解析及CDN加速

    标题: 申请免费域名并配置DNS解析及CDN加速 作者: 梦幻之心星 sky-seeker@qq.com 标签: [#申请,#免费,#域名,#DNS解析,#CDN加速,#子域名] 目录: [网站] 日 ...

  5. 阿里云对象存储OSS及CDN加速配置

    目录 十大云存储服务商 1. 登陆阿里云官网,开通对象存储服务 OSS 2. 创建存储空间 3. 绑定自定义域名 4. 配置阿里云CDN加速 5. 购买阿里云免费SSL证书 6. 阿里云CDN配置HT ...

  6. 阿里云系列——6.给你的域名使用CDN加速(详细步骤+简单配置)

    网站部署之~阿里云系列汇总 http://www.cnblogs.com/dunitian/p/4958462.html 进入管理页面:https://home.console.aliyun.com/ ...

  7. vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  8. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  9. Signalr系列之虚拟目录详解与应用中的CDN加速实战

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 前段时间一直有人问我 在用SignalR 2.0开发客服系统[系列1:实现群发通讯]这篇文章中的"/Si ...

随机推荐

  1. 前端通过将json转成excel文件下载

    方法一: 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下 ...

  2. 7个步骤让PC网站自动适配手机网页

    传统的网站如何完成向移动设备的快速转型? 通过移动适配技术可以实现,切图网是国内首家基于web技术服务的公司,而移动适配主要通过底层的web技术开发手段来完成,下面切图网将从技术角度来告诉你通过7个步 ...

  3. Jenkins+maven+gitlab自动化部署之gitLab搭建(二)

    Gitlab我们这里采用docker方式部署,详细请参考:Docker部署Gitlab11.10.4

  4. insert 一条数据 然后拿出这条数据在数据库中生成的ID

    [insert 一条数据 然后拿出这条数据在数据库中生成的ID] <insert id="insert" parameterType="management&quo ...

  5. Erlang:[笔记三,构建工具rebar之使用依赖]

    概述 类似Java中的Maven,Gradle,在Erlang中同样也有包管理的工具,Rebar提供Erlang依赖(包)管理机制,开发人员可以重复使用已有的模块,通过rebar引入自己的项目直接使用 ...

  6. scratch少儿编程——03、动作:运动的开始,游戏的基础。

    各位小伙伴大家好: 从这一期开始我们来学Scratch的具体操作. 第一季我们会从每一个脚本模块开始.一个程序块一个程序块去操作,感受它的效果. 今天我们来一起学习程序区的脚本类动作模块的指令. 动作 ...

  7. SAS学习笔记23 线性回归、多元回归

    线性回归 由样本资料计算的回归系数b和其他统计量一样,存在抽样误差,因此,需要对线性回归方程进行假设检验 1.方差分析 2.t检验 相关系数的假设检验 相关系数(correlation coeffic ...

  8. 一文搞懂嵌入式uboot、kernel、文件系统的关系

    总览: 在linux系统软件架构可以分为4个层次(从低到高分别为):   1.引导加载程序         引导加载程序(Bootloader)是固化在硬件Flash中的一段引导代码,用于完成硬件的一 ...

  9. 复杂链表的复制——牛客offer

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...

  10. js大数计算之计算

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...