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. Acquire and Release Fences

    转载自:   http://preshing.com/20130922/acquire-and-release-fences/ Acquire and release fences, in my op ...

  2. IdentityServer4 学习一

    网上找的关于IdentityServer4的百度脑图 http://naotu.baidu.com/file/75b251257ce27cfa62e0ad7f47b75576?token=e2db61 ...

  3. Python--context(上下文)(其实是环境)

    最近读Flask的文档,读到很多关于Context(上下文)的术语,如应用上下文,请求上下文等,查阅资料但没有得到理解?有没有比较好的解释? 每一段程序都有很多外部变量.只有像Add这种简单的函数才是 ...

  4. spring整合quartz框架

    spring整合quartz: 网上也有很多教程,好多都是基于配置方式,我们使用当然怎么简单就怎么用,所以这里介绍基于注解方式整合quartz.前提:你需要有一个能运行的web项目. 1.引依赖: & ...

  5. jvm的内存区域介绍

    什么是jvm? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的 ...

  6. 使用 keytool 生成安卓应用程序签名

    下载 keytool jar包: 解压jar包到固定目录 如: cd  /Library/Java/JavaVirtualMachines/ 进入到jar包目录: cd /Library/Java/J ...

  7. 超详细Nginx的安装和配置教程

    一. 编译安装nginx 下载nginx安装包 wget http://nginx.org/download/nginx-1.8.0.tar.gz 也可以选择其他版本,官网:http://nginx. ...

  8. Java流对象:InputStream、OutputStream、Reader、Writer

    流对象使用完一般要用close方法关闭.释放资源. InputStream 和OutPutStream 二者都是字节输入和输出的抽象父类,子字节为单位处理数据,每次读取.写入一个字节,适合处理二进制文 ...

  9. http服务详解(3)

    https https:http over sslSSL会话的简化过程 (1) 客户端发送可供选择的加密方式,并向服务器请求证书 (2) 服务器端发送证书以及选定的加密方式给客户端 (3) 客户端取得 ...

  10. MySQL数据库的基本认识与操作

    Mysql是一个数据库,但是我们安装的mysql数据库服务,服务就会有状态,启动,停止,重启.我们使用mysql必须保证mysql启动. 使用mysql数据库需要连接数据库 Mysql -u -p - ...