当前位置：首页 > news >正文

vue项目cdn打包优化

news 2026/5/25 5:38:20

0.用vue ui可以查看项目打包后的情况。

1.定义包的排除

let externals = {'axios': 'axios','element-ui': 'ELEMENT','echarts': 'echarts',}
configureWebpack: {externals: externals }

2.配置cdn包资源

// 配置
let cdn = {css: [// element-ui css'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表],js: [// vue must at first!'https://unpkg.com/vue/dist/vue.js', // vuejs// element-ui js'https://unpkg.com/element-ui/lib/index.js', // elementUI]
}
// 插入html的属性中chainWebpack (config) {config.plugin('html').tap(args => {args[0].cdn = cdnreturn args})}

3.在public文件夹下的html的head标签中插入cdn资源

<% for(var css of htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%=css%>" />
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %><script src="<%=js%>"></script>
<% } %>

4.根据环境,配置是否使用cdn

const isProd = process.env.NODE_ENV === 'production' 
...
cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}

5.运行npm run build打包即可。

注意：ui组件的css要在mian.js中注释掉(如import ‘element-ui/lib/theme-chalk/index.css’)，因为我们在externals并没有去定义排除。其他的能在externals定义的资源(如import ElementUI from ‘element-ui’;Vue.use(ElementUI)),都不需要改动，打包后也没有啥影响。还有ui组件我用的整体引入的方式,按需引入配置有点麻烦,就没去弄了。

6.完整代码：

vue.config.js

const { defineConfig } = require('@vue/cli-service')
// 排除
let externals = {'vue': 'Vue','axios': 'axios','element-ui': 'ELEMENT','echarts': 'echarts',
}
// cdn资源
let cdn = {css: [// element-ui css'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表],js: [// vue must at first!'https://unpkg.com/vue@2/dist/vue.js', // vuejs// element-ui js'https://unpkg.com/element-ui/lib/index.js', // elementUI'https://unpkg.com/axios/dist/axios.min.js','https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js']
}
// 判断环境
const isProd = process.env.NODE_ENV === 'production'
cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}
module.exports = defineConfig({transpileDependencies: true,publicPath:'./',configureWebpack: {externals: externals},chainWebpack(config) {config.plugin('html').tap(args => {args[0].cdn = cdnreturn args})}
})

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import ElementUI from 'element-ui';
// 打生产包时注释掉下面的css
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
Vue.$axios = axios
Vue.use(ElementUI);new Vue({render: h => h(App),
}).$mount('#app')

public/index

<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><!-- 如果不想这样写，也可以像下面这样直接引入资源 --><% for(var css of htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%=css%>" /><% } %><% for(var js of htmlWebpackPlugin.options.cdn.js) { %><script src="<%=js%>"></script><% } %><!-- 如果想直接引入资源,就不需要上面这段,然后vue.config.js中的 args[0].cdn = cdn也不需要了 --><link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>

总结：

生产和开发唯一要改动的就是ui组件的css样式的引入（import ‘element-ui/lib/theme-chalk/index.css’），其他一律不需要改动。生产：注释掉样式的引入,开发去掉该注释。还有ui组件用了cdn的话，vue也要用cdn，如果vue不用cdn，打包后会出现引入顺序问题，导致报错。

vue项目cdn打包优化

0.用vue ui可以查看项目打包后的情况。 1.定义包的排除 let externals {axios: axios,element-ui: ELEMENT,echarts: echarts,} configureWebpack: {externals: externals }2.配置cdn包资源 // 配置 let cdn {css: [// element-ui csshttps://unpkg.com/element-ui/lib/th…...

编程日记 2023/7/30 10:51:44

Android 之 MediaPlayer 播放音频与视频

本节引言： 本节带来的是Android多媒体中的——MediaPlayer，我们可以通过这个API来播放音频和视频该类是Androd多媒体框架中的一个重要组件，通过该类，我们可以以最小的步骤来获取，解码和播放音视频。它支持三种不同的…...

编程日记 2023/7/30 10:50:43

React中事件处理器的基本使用

在React中，为了提高性能，跨浏览器兼容性和开发体验，React实现了一套自己的事件机制，利用事件委托和合成事件的方式统一管理事件订阅和分发。为了让组件能够响应用户的交互行为，React提供了一系列的事件处理器&#xf…...

编程日记 2023/7/30 10:49:41

RobotFramework

一、RobotFramework的简介和特点 1、关键字驱动： 把项目中的业务逻辑封装成一个一个的关键字，然后调用不同的关键字组成不同的业务 2、数据驱动把测试数据放到excel：yaml文件中通过改变文件中的数据去驱动测试用例执行 3、特点&#xff…...

编程日记 2023/7/30 10:48:40

【Matplotlib 绘制折线图】

使用 Matplotlib 绘制折线图在数据可视化中，折线图是一种常见的图表类型，用于展示随着变量的变化，某个指标的趋势或关系。Python 的 Matplotlib 库为我们提供了方便易用的功能来绘制折线图。绘制折线图下面的代码展示了如何使用 Matplo…...

编程日记 2023/7/30 10:47:39

ARM汇编基本变量的定义和使用

一、ARM汇编中基本变量是什么？数字变量: GBLA LCLA SETA 逻辑变量:GBLL LCLL SETL 字符串:GBLS LCLS SETLS 注意需要TAB键定义变量和行首改变值二、使用步骤 1.引入库代码如下（示例）： GBLA led_num Reset_Handler PROCEXPORT Reset_Handler [WEA…...

编程日记 2023/7/30 10:46:38

排序算法汇总

每日一句：你的日积月累终会成为别人的望尘莫及目录常数时间的操作选择排列冒泡排列【异或运算】面试题： 1）在一个整形数组中，已知只有一种数出现了奇数次，其他的所有数都出现了偶数次，怎么找到…...

编程日记 2023/7/30 10:45:38

cocos2d 中UserDefault在windows平台下的路径问题

在使用cocos2dx c开发项目时，通常使用cocos自带的UserDefault来存储一些项目所用到的一些配置信息：如游戏的音量，游戏的闯关数等... 但是windows平台下，测试发现如果用户的帐户名使用是中文，在启动程序时会报错&#…...

编程日记 2023/7/30 10:44:36

ChatGPT与高等教育变革：价值、影响及未来发展

最近一段时间，ChatGPT吸引了社会各界的目光，它可以撰写会议通知、新闻稿、新年贺信，还可以作诗、写文章，甚至可以撰写学术论文。比尔盖茨、马斯克等知名人物纷纷为此发声，谷歌、百度等知名企业纷纷宣布要提供类似产品。…...

编程日记 2023/7/30 10:43:34

Matlab Image Processing toolbox 下载安装方法

当安装好Matlab之后，发现没有Image Processing toolbox这个图像处理工具箱从新安装一遍， 选上 Image Processing toolbox 但是不用选matlab即可 1.找到之前安装时的Setup安装程序包，按照之前安装Matlab步骤，到选择需要安装的Ma…...

编程日记 2023/7/30 10:42:34

什么是消息键（Key）？如何使用消息键进行消息顺序性保证？

消息键（Key）是Kafka消息的一个可选属性，用于标识消息的逻辑关联关系。每条消息可以携带一个关键字作为其键，这个键可以是字符串、整数等数据类型。使用消息键可以在Kafka中实现消息的顺序性保证，具体方式如下&#x…...

编程日记 2023/7/30 10:41:33

慎思笃行，兴业致远：金融行业的数据之道

《中庸》中说，“博学之，审问之，慎思之，明辨之，笃行之”。这段话穿越千年，指引着中国千行百业的发展。对于金融行业来说，庞大的数据量可以说是“博学”的来源。但庞大的数据体量，既是…...

编程日记 2023/7/30 10:40:32

Git-分支管理

文章目录 1.分支管理2.合并冲突3.合并模式4.补充 1.分支管理 Git分支管理是指在Git版本控制系统中，使用分支来管理项目的不同开发线路和并行开发的能力。通过分支，开发者可以在独立的环境中进行功能开发、bug修复等工作，而不会影响到主分支上…...

编程日记 2023/7/30 10:39:30

[Ubuntu 22.04] containerd配置HTTP方式拉取私仓Harbor

文章目录 1. 基础环境配置2. Docker安装3. 部署Harbor，HTTP访问4. 部署ContainerD5. 修改docker配置文件，向harbor中推入镜像6. 配置containerd6.1. 拉取镜像验证6.2. 推送镜像验证 1. 基础环境配置 [Ubuntu 22.04] 安装K8S基础环境准备脚本 2. Docker安…...

编程日记 2023/7/30 10:38:29

入门指南：深入解析OpenCV的copyTo函数及其与rect的应用场景

文章目录导言copyTo函数的示例copyTo函数与rect的应用场景结论导言 OpenCV是一个功能强大的开源计算机视觉库，广泛应用于图像处理和计算机视觉任务。在OpenCV中，copyTo函数是一个重要的图像处理函数，它允许我们在不同的图像之间复制像素数…...

编程日记 2023/7/30 10:37:27

2018年全国硕士研究生入学统一考试管理类专业学位联考写作试题——解析版

2018年1月真题四、写作：第56~57小题，共65分。其中论证有效性分析30 分，论说文35分。 56.论证有效性分析： 分析下述论证中存在的缺陷和漏洞，选择若干要点，写一篇600字左右的文章，对该论证的有…...

编程日记 2023/7/30 10:36:24

系统集成|第七章(笔记)

目录第七章范围管理7.1 项目范围管理概念7.2 主要过程7.2.1 规划范围管理7.2.2 收集需求7.2.3 定义范围7.2.4 创建工作分解结构 - WBS7.2.5 范围确认7.2.6 范围控制上篇：第六章、整体管理第七章范围管理 7.1 项目范围管理概念概述：项目范围管理就…...

编程日记 2023/7/30 10:35:22

Qt —— Vs2017编译hiredis源码并测试调用（附调用hiredis库源码）

下载hiredis源码编译hiredis源码 1、解压下载的hiredis源码包，如图使用Vs2017打开hiredis_win.sln 2、如下两图，Vs2017打开.sln后点击升级。分别对两个工程的debug、release进行配置。Debug配置为多线程调试DLL(MDd)、Release配置为多线程DLL(/MD)，这样做是为了配合被调用…...

编程日记 2023/7/30 10:34:20

深入理解设计模式：设计模式定义、设计原则以及组织编目

文章目录一、设计模式1.1 设计模式的起源1.2 设计模式的定义1.3 记录要素1.4 合理使用模式二、设计模式的六大原则2.1 开闭原则(Open-Closed Principle, OCP)2.1.1 定义2.1.2 原则分析2.1.3 开闭原则的意义所在 2.2 单一职责原则(Single Responsibility Principle, SRP)2.4.1…...

编程日记 2023/7/30 10:33:19

鸿鹄协助管理华为云与炎凰Ichiban

炎凰对华为云的需求在炎凰日常的开发中，对于服务器上的需求，我们基本都是采用云服务。目前我们主要选择的是华为云，华为云的云主机比较稳定，提供的云主机配置也比较多样，非常适合对于不同场景硬件配置的需求&#xff…...

编程日记 2023/7/30 10:32:18

全波形反演新思路：大步长梯度优化器如何克服周波跳跃难题

1. 项目概述：当梯度优化器“大步快跑”时，它能跳出周波跳跃的陷阱吗？在地球物理勘探领域，全波形反演（FWI）被誉为速度建模的“圣杯”，它通过迭代匹配模拟地震数据与观测数据，来反推地…...

编程新知 2026/5/25 5:04:30

2026年5月儿童护眼灯品牌推荐：TOP5排名书桌防蓝光评测

摘要当儿童近视率持续攀升，家长在选购护眼灯时面临从“照亮”到“护眼”的认知升级，如何在琳琅满目的品牌中锁定真正科学有效的方案成为核心焦虑。根据世界卫生组织最新数据，全球儿童近视患病率预计在2050年将达到50%，而照明环境…...

编程新知 2026/5/25 4:54:14

JMeter临界部分控制器：业务节奏建模与资源争用压测核心

1. 为什么“临界部分控制器”是压测中真正卡住团队的隐形瓶颈？在JMeter压测项目里，我见过太多团队把90%精力花在“怎么造出1000并发”上——线程组配好、HTTP请求写完、监听器一开，看着Active Threads曲线冲上峰值就以为大功告成。结果一进生…...

编程新知 2026/5/25 4:31:13

机器学习调试：从数据到部署的系统化故障诊断与修复实践

1. 机器学习调试：从“炼丹”到“精密工程”的必经之路在机器学习项目的日常推进中，我们常常会经历一个从兴奋到困惑，再到“玄学”调试的循环。模型在验证集上表现优异，一上线就“翻车”；训练时损失曲线平滑下降&#x…...

编程新知 2026/5/25 4:18:42

实战精通openpilot自动驾驶系统：从安装到深度定制的完整指南

实战精通openpilot自动驾驶系统：从安装到深度定制的完整指南【免费下载链接】openpilot openpilot is an operating system for robotics. Currently, it upgrades the driver assistance system on 300 supported cars. 项目地址: https://gitcode.com/GitHub_T…...

编程新知 2026/5/25 3:34:49

MacBook新手福音：用Final Cut Pro 10.6.5搞定你的第一门视频课（附保姆级设置与导出指南）

MacBook新手福音：Final Cut Pro 10.6.5视频课制作全流程精解第一次打开Final Cut Pro时，那个布满陌生术语的界面是否让你望而却步？作为Mac用户专属的视频剪辑利器，它其实远比想象中友好。本文将带你用最直接的方式，从零…...

编程新知 2026/5/25 3:02:14

昇腾CANN ops-nn RMSNorm：为什么 LLaMA 和 Mistral 都用它替代 LayerNorm

LayerNorm 做两件事：减均值（center）、除标准差（scale）。RMSNorm 只做一件：除 RMS。丢掉均值减法——省了 30% 计算，训练效果几乎一样。LLaMA、Mistral、Gemma 全系标配。 RMSNorm 的公式&#x…...

编程新知 2026/5/24 21:25:50

DeepSeek免费额度怎么用才不浪费？资深MLOps工程师的6小时压测报告与最优请求批处理公式

更多请点击： https://kaifayun.com 第一章：DeepSeek免费额度怎么用才不浪费？资深MLOps工程师的6小时压测报告与最优请求批处理公式在连续6小时、覆盖12种负载模式的真实压测中，我们发现DeepSeek API免费额度（当前为1…...

编程新知 2026/5/24 21:21:38

基于 OAuth 设备码流滥用的 Kali365 钓鱼攻击机理与防御体系研究

摘要 2026 年 5 月，美国联邦调查局（FBI）发布安全预警，披露针对 Microsoft 365 环境的 PhaaS 平台 Kali365 正通过滥用 OAuth 设备码认证流程实施规模化钓鱼攻击，可绕过多因素认证（MFA）窃取合法访…...

编程新知 2026/5/24 21:19:35

机器学习海气耦合模型Ola：解耦训练与滞后集合预报实战

1. 项目概述：当机器学习遇见海气耦合在气候预测这个领域里摸爬滚打了十几年，我见过太多复杂的物理模型和让人头大的耦合方案。传统的海气耦合模型，比如那些基于物理方程组的数值模式，虽然机理清晰，但计算成本高得吓人&…...

编程新知 2026/5/24 20:37:54