vue项目+element-plus配置cdn

简介: 本文分享了如何给项目配置cdn。

1,项目配置

最近在做一个项目,项目配置版本如下:

  • vue:3.2.6
  • vue-router:4.0.11
  • vuex:4.0.2
  • axios:0.21.4
  • element-plus:1.2.0-beta.6
  • typescript:4.1.5
  • sass:1.26.5

下面分享一下,如上配置的vue3项目,如何配置cdn加速

2,CDN介绍

介绍下常见的免费cdn网站

2.1,常见cdn网站

2.2,通过UNPKG查找需要的cdn资源

BootCDNStaticfile CDN简单明了的搜索方式就不说了,这里讲一下UNPKG搜索cdn资源的方式。

cdn文件路径格式:https://unpkg.com/:package@:version/:file

路径解析如下图:

url解释

以下是几个cdn路径的例子:

// element-plus
https://unpkg.com/element-plus@1.2.0-beta.6/dist/index.full.js

// axios
https://unpkg.com/browse/axios@0.21.4/dist/axios.min.js

直接使用资源名后面加/,可以查看文件夹目录,比如:

https://unpkg.com/browse/axios@0.21.4/,复制进浏览器地址栏,可看见如下目录:<br/>
目录
打开后自己需要什么文件可以自己找,很方便,其余更多黑科技自行百度。

3,实战代码

按如下配置,操作方式基本一样,文件的cdn版本自行替换。

vue.config.js

const CDN = {
  css: [
    'https://unpkg.com/browse/element-plus@1.2.0-beta.6/theme-chalk/index.css'
  ],
  js: [
    'https://cdn.bootcdn.net/ajax/libs/vue/3.2.6/vue.global.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.11/vue-router.global.js',
    'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.js',
    'https://unpkg.com/element-plus@1.2.0-beta.6/dist/index.full.js',
    'https://unpkg.com/browse/element-plus@1.2.0-beta.6/lib/locale/lang/zh-cn.js'
  ]
};

let objExternals = {
  vue: 'Vue',
  axios: 'axios',
  vuex: 'Vuex',
  'vue-router': 'VueRouter',
  'element-plus': 'ElementPlus'
}

module.exports = {
  publicPath: '/',
  assetsDir: './assets',
  chainWebpack: config => {
      // 配置,将当前页定义的cdn值传到主页面(index.html)
    config.plugin('html').tap(args => {
    // 这里我是除本地环境,其余均使用CDN,可自己选择是否配置
      args[0].cdn = process.env.VUE_APP_STAGE === 'LOCAL' ? {} : CDN
      return args;
    });
  },
  configureWebpack: {
    devServer: {
        //...与本文无关
    },
    resolve: {
        //...与本文无关
    },
    plugins: [
        //...与本文无关
    ],
    // 定义webpack打包配置
    externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals 
  }
}

index.html

head标签里加上如下:

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  <% } %>

body标签里加上如下:

<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus, { locale: zhCn }) // 配置中文
app.mount('#app')

4,后记

确实配了cdn后打包文件小了很多,不过如果cdn挂了,你的项目也就挂了。

如果看了觉得有帮助的,我是@上进的鹏多多,欢迎 点赞 关注 评论;END

个人主页

目录
相关文章
|
9天前
|
缓存 监控 安全
提升网站性能的10个CDN配置优化技巧
本文深入解析CDN选型、缓存策略、HTTPS加速、动态内容分发等十大优化方案,涵盖节点覆盖、协议支持、安全防护、边缘计算与多CDN架构设计,助力技术团队提升加载速度40%-60%,降低带宽成本30%-50%,实现持续高性能交付。
164 2
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
303 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
编解码 监控 算法
CDN+OSS边缘加速实践:动态压缩+智能路由降低30%视频流量成本(含带宽峰值监控与告警配置)
本方案通过动态压缩、智能路由及CDN与OSS集成优化,实现视频业务带宽成本下降31%,首帧时间缩短50%,错误率降低53%。结合实测数据分析与架构创新,有效解决冷启动延迟、跨区域传输及设备适配性问题,具备快速投入回收能力。
231 0
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
134 0
|
8月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
240 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
338 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
301 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
8月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
308 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
7月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
504 4
|
8月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
441 12