【VUE】cli4项目配置CDN资源

最新推荐文章于 2024-04-10 07:41:31 发布
最新推荐文章于 2024-04-10 07:41:31 发布
阅读量576 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42410658/article/details/112228013
版权

前言

穷，买的服务器只有1M带宽，加载资源非常的慢，所以考虑是用CDN来加速，通过CDN减轻自己服务器的带宽消耗（资源从别的服务器下载，而不是你自己的服务器），另一方面CDN上的资源一般是你不会轻易修改的，而且浏览器访问之后还会缓存下来，用户再次访问就无需二次下载资源，网站后续的整体访问速度就更快了，同时CDN还可以做加速。
接下来以引入Vue和Element为例给我自己的cli4项目配置CDN资源

1. 去哪儿找免费CDN

1.1 cdnjs仓库

cdnjs 仓库网址
在这里插入图片描述
在这里插入图片描述

1.2 BootCDN

BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。

在这里插入图片描述

2 引入Vue和Element

pulic/index.html文件如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    !--引入Element 和 Vue的CDN加速-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3 修改main.js文件

因为我们使用CDN的方式引入文件了，因此这里直接将下面的代码注释或者删除

// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en'

// Vue.use(ElementUI, { locale })

4. 修改vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      vue: "Vue",
      "element-ui": "ELEMENT"
    }
  }
}

另外webpack-cli脚手架创建的项目则需要配置webpack.base.conf.js文件，添加下面的内容：

externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
  },

完成

5. 进阶玩法

点击这里

TaotaoPlus
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli4 项目下使用cdn引入静态资源，减少打包生成的js、css文件体积，优化页面打开速度
前端e栈
03-05 934
在项目开发中我们常用到的一些类库，例如vue、elemenu-ui、axios、vue-router等等这些不长更改的文件，可以在vue.config.js里做下cdn配置
vue-cli4打包最强优化（10M变300kb）
最新发布
2301_77110865的博客
05-06 562
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue cli4 配置资源CDN
qq_34295211的博客
03-14 5947
出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。脚手架经过升级，cli4的相关配置都需要在vue.config.js这个文件中进行，如果你没有这个文件请自己新建一个（与package.json同级）。 这里我们首先配置configureWebpack的externals字段，把不需...
vue-cli4.0 配置CDN加速防范
uu_justdoit的博客
04-27 1478
首先设置vue.config.js const externals = { vue: "Vue", "vue-router": "VueRouter", vuex: "Vuex", axios: "axios" }; const cdn = { // 开发环境 dev: { css: [], js: [] }, // 生产环境 build:...
Vue-CLI 4.0配置CDN的方法
xinyuandu的博客
10-23 1666
Vue-CLI 4.0配置CDN的方法 之前试过了很多搭配cdn的方法，他们说的也都是对的，但是在自己的项目中确实没有办法执行，总是会报错，因此总结了一下我搭配cdn的所有流程，希望有所帮助 创建vue.config.js 创建vue.config.js ，文件的目录层级是雨src文件夹同级别的，因为vue-cli在4.0中取消了关于webpack等插件的配置，但是在本身也集成了这些插件，因此可以通过这样的一个文件去对整体的内容进行配置。 找到CDN的路径 如果要引用cdn，首先还是要找到CDN路径，这个是
JS.CDN.Vue3.ElementPlus.20210128115701:使用CDN Vue3和ElementPlus
05-23
CDN.Vue3.ElementPlus 使用CDN Vue3和ElementPlus。 演示 特征 销售点 要求 2021-01-28 4 Model B Rev 1.2 破坏者10.0 2020-08-20 bash 5.0.3（1）-发布 Chrome86.0.4240.197 $ uname -a Linux raspberrypi 5.4.83-v7l+ # 1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux 安装 git clone https://github.com/ytyaru/JS.CDN.Vue3.ElementPlus.20210128115701 用法 启动终端 移动当前目录。 到index.html所在的路径。 cd JS.CDN.Vue3.ElementPlus.20210128115701 /
Vue-Cli项目优化操作的实现
10-16
Vue-Cli项目优化是提高Web应用性能的关键步骤，尤其对于由Vue-Cli 2.x生成的项目，常见的问题包括首屏加载时间过长和编译资源体积过大。本文将详细阐述如何通过多种策略来优化Vue-Cli项目，以提升用户体验和项目性能...
vue-cli3项目升级到vue-cli4 的方法总结
11-21
这是我对以前配置的基于vue-cli3搭建的前端H5模板的升级，主要把vue-cli3项目升级为vue-cli4，并删除一些过时插件。插件版本升级到当前(2020-03-19)最高版本（升级了很多webpack插件版本），升级完后新加多域名代理...
echart+element+vue搭建CDN项目
01-18
在本文中，我们将深入探讨如何使用ECharts、Element UI和Vue.js来构建一个基于CDN的项目。ECharts是一款由百度开发的开源JavaScript图表库，提供了丰富的可视化图表类型；Element UI则是一个流行的Vue.js组件库，它...
vue_cli_optimize_cdn:vue-cli 项目优化之：引入 cdn（待补充）
05-15
vue_cli_optimize_cdn 一个Vue.js项目构建设置 # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for ...
详解基于vue-cli优化的webpack配置
01-21
项目采用的是vue全家桶，构建配置都是基于vue-cli去改进的。关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。 仔细总结...
webpack使用HtmlWebpackPlugin进行cdn配置
Msgyvcici
03-25 4881
CDN服务商的选择 在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如： BootCDN unpkg 其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CD...
vue-cli4 vue3+element-plus采用本地cdn方式，提高开发启动速度
九段刀客的博客
12-05 1157
public/index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /&g
vue打包前优化
Wen_Tao98的博客
03-10 343
打包优化 项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题： module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060,
vue-cli4项目配置cdn引入静态资源
九段刀客的博客
06-28 5611
脚手架版本：@vue/cli 4.4.1 vue.config.js中 module.exports = { //打包是否生成.map文件 productionSourceMap: false, lintOnSave: false, configureWebpack: { externals: { 'element-ui': 'ELEMENT', 'vue': 'Vue', "vue-router": "VueRouter", 'vuex': "Vuex" } }
vue-cli4打包最强优化（10M变300kb），字节跳动+京东+360+网易面试题整理
weixin_58134620的博客
04-10 911
chunks: "async”,//默认作用于异步chunk，值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，chunk._modules为chunk所有依赖的模块，通过chunk的名字和所有依赖模块的resource可以自由配置,会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css。面试，说到底是一种考试。其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。
vue-cli@4中cdn引入外部js
huzhenv5的博客
01-19 4917
本文章代码所用vue-cli的版本号为： @vue/cli 4.1.2 有的时候，我们需要在index.html中通过cdn的方式引入一些外部的js脚本等资源，比如百度地图、高德地图和Leaflet等，碰到这种情况我们该如何操作呢？ 1，index.html中引入相关文件 vue-cli自动创建的项目中，index.html在根目录的public文件夹下，直接在该index.html中引入相关资源...
vuecli4——CDN分发
huang_wei_xiong的博客
04-11 742
vue.config.js配置 注意：vue的js链接一定要在其他的上面 chainWebpack: config => { // 移除 preload(预载) 插件 config.plugins.delete('preload') // 移除 prefetch(预取) 插件 config.plugins.delete('prefetch') // npm run analyzer 时才开启 if (pro
vue-cli4.0 配置CDN加速
mrhaoxiaojun的博客
09-10 1791
vue.config.js 出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。 以下是vue-cli4的相关配置vue.config.js cdn.config.js module.exports = assetsCDN = { useCDN: false, // webpack build externals externals: { vue: 'Vue', 'vue-router
vue-cli2 cdn
06-01
如果您想在使用Vue CLI 2构建的项目中使用CDN，可以在index.html文件中添加相应的CDN链接。例如，您可以在标签中添加以下链接： ```html <!-- Vue.js CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值