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

vue项目cdn打包优化

news 文章来源：https://blog.csdn.net/qq_38868959/article/details/131998204 2025/2/13 0:06:37

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 播放音频与视频

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

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

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

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

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

RobotFramework

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

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

【Matplotlib 绘制折线图】

使用 Matplotlib 绘制折线图 在数据可视化中&#xff0c;折线图是一种常见的图表类型&#xff0c;用于展示随着变量的变化&#xff0c;某个指标的趋势或关系。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

排序算法汇总

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

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

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

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

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

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

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

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

Matlab Image Processing toolbox 下载安装方法

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

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

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

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

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

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

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

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

Git-分支管理

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

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

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

文章目录 1. 基础环境配置2. Docker安装3. 部署Harbor&#xff0c;HTTP访问4. 部署ContainerD5. 修改docker配置文件&#xff0c;向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是一个功能强大的开源计算机视觉库&#xff0c;广泛应用于图像处理和计算机视觉任务。在OpenCV中&#xff0c;copyTo函数是一个重要的图像处理函数&#xff0c;它允许我们在不同的图像之间复制像素数…...

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

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

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

编程日记 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 范围控制 上篇&#xff1a;第六章、整体管理 第七章 范围管理 7.1 项目范围管理概念 概述&#xff1a;项目范围管理就…...

编程日记 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

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

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

Vite创建Vue+TS项目引入文件路径报错

使用vite搭建vue3脚手架的时候&#xff0c;发现main.ts中引入App.vue编辑器会报错&#xff0c;但是不影响代码运行。 报错信息&#xff1a;TS2307: Cannot find module ‘./App.vue’ or its corresponding type declarations. 翻译过来是找不到模块或者相关的声明类型&#…...

编程日记 2023/7/30 10:31:17

计算机里基本硬件的组成以及硬件协同

文章目录 冯诺依曼体系输入设备输出设备存储器运算器控制器协同工作的流程 冯诺依曼体系 世界上第一台通用计算机&#xff0c;ENIAC&#xff0c;于1946年诞生于美国一所大学。 ENIAC研发的前期&#xff0c;需要工作人员根据提前设计好的指令手动接线&#xff0c;以这种方式输入…...

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

2023软件设计师中级备考经验分享（文中有资料链接分享）

先摊结论吧&#xff0c;软考中级设计师备考只是备考半个月&#xff08;期间还摆烂了几天&#xff09;&#xff0c;然而成绩如下&#xff1a; 我自己都没想到会这么好的成绩。。。 上午题&#xff1a;推荐把软考通APP里的历年真题刷3-4遍&#xff0c;直接刷真题&#xff0c;然后…...

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

Windows 10 中无法最大化任务栏中的程序

方法1&#xff1a;仅选择选项 PC 屏幕 如果您使用双显示器&#xff0c;有时这可能会发生在您的 1 台计算机已插入但您正在访问的应用程序正在另一台计算机上运行的情况下&#xff0c;因此您看不到任何选项。因此&#xff0c;请设置仅在主计算机上显示显示的 PC 屏幕选项。 第…...

编程日记 2023/7/30 10:28:11

【iOS】KVOKVC原理

1 KVO 键值监听 1.1 KVO简介 KVO的全称是Key-Value Observing&#xff0c;俗称"键值监听"&#xff0c;可以用于监听摸个对象属性值得改变。 KVO一般通过以下三个步骤使用&#xff1a; // 1. 添加监听 [self.student1 addObserver:self forKeyPath:"age"…...

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

当机器人变硬核：探索深度学习中的时间序列预测

收藏自&#xff1a;Wed, 15 Sep 2021 10:32:56 UTC 摘要&#xff1a;时间序列预测是机器学习和深度学习领域的一个重要应用&#xff0c;它可以用于预测未来趋势、分析数据模式和做出决策。本文将介绍一些基本概念和常用方法&#xff0c;并结合具体的案例&#xff0c;展示如何使…...

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

C# Solidworks二次开发：自动创建虚拟零件及使用注意事项

今天要讲的是关于在solidworks中如何自动创建虚拟零件的功能&#xff0c;也就是solidworks中插入新零件这个功能。 实现这个功能需要使用的API如下所示&#xff1a; InsertNewVirtualPart&#xff08;swFaceOrPlane1, out swcomp2&#xff09;&#xff1b; 其中这个方法中使…...

编程日记 2023/7/30 10:25:08

vim工具 windows系统使用

vim常用命令&#xff1a; 编辑–>输入&#xff1a; i: 在当前光标所在字符的前面&#xff0c;转为输入模式&#xff1b; 粘贴命令 p p: 如果删除或复制为整行内容&#xff0c;则粘贴至光标所在行的下方&#xff0c;如果复制或删除的内容为非整行&#xff0c;则粘贴至光标所…...

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

Tesseract开源的OCR工具及python pytesseract安装使用

一 、介绍 Tesseract是一款由Google赞助的开源OCR。 pytesseract是python包装器&#xff0c;它为可执行文件提供了pythonic API。 Tesseract 已经有 30 年历史&#xff0c;开始它是惠普实验室的一款专利软件&#xff0c;在2005年后由Google接手并进一步开发和完善。Tesseract支…...

编程日记 2023/7/30 10:23:03

【数理知识】自由度 degree of freedom 及自由度的计算方法

放在最前的一句话&#xff1a;自由度是一个存在于两个学科中的概念&#xff0c;一个是存在于统计学中的自由度&#xff0c;另一个是存在于物理学中的自由度。而我本人需要的是研究物理学中的自由度概念&#xff0c;同时本笔记全篇也是在了解物理学中的自由度。 文章目录 自由度…...

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

网站开发常用插件/免费seo关键词优化排名

题目蓝链 Solution 我们设\(dp[i][j]\)表示到第\(i\)个点多走了\(j\)步的方案数&#xff0c;\(dis[i]\)表示从\(1\)到\(i\)的最短距离 显然有以下转移方程式&#xff0c; \[ dp[i][j] \sum dp[k][dis_i j - len_{i, k} - dis_k] \] 其中&#xff0c;\(k\)为所有\(i\)可以直接…...

编程日记 2025/2/12 23:56:51

做网站常用的英文字体/西安网站推广助理

作者&#xff1a;ownlinux.cn出自&#xff1a;ownlinux.cn如果你栖身在德国柏林并且你在柏林乘坐了地铁&#xff0c;那么你能够就不会错过在柏林的地铁零碎里播放的 Ubuntu 8.04 LTS (Hardy Heron) 颁布发表的告白。据领会在德国柏林的地铁的车厢中有超越 3,700 个默示器在动弹…...

编程日记 2025/2/12 23:01:14

物联网的核心和基础是什么/怎么做seo网站关键词优化

文章目录二叉树的层序遍历1.解法2.总结算法3.题目推荐二叉树的层序遍历 leetcode链接 1.解法 之前说过&#xff0c;层序遍历就是广度优先搜索&#xff0c;实现广度优先搜索要使用队列&#xff0c;因为队列先进先出&#xff0c;符合一层一层遍历的逻辑&#xff0c;而是用栈先…...

编程日记 2025/2/12 22:58:13

网络优化公司网站代码/电商运营助理

文章目录1. 安装2. 插桩3. Quick Startcorpus基本使用输出多线程字典崩溃分析4. 用户手册如何查看结果如何配置&#xff08;环境变量&#xff09;多线程5. Using ASAN with AFL6. TipsFuzz优化7. More about AFLAFL原理8. Demo9. 其它参考资料官方文档&#xff1a;https://afl-…...

编程日记 2025/2/12 19:32:57

别人做的网站怎么打开吗/西安seo网络优化公司

一.描述 1.QDateTimeEdit是一个用来编辑日期和时间的单行文本框&#xff0c;由于大继承自QAbstractSpinBox类&#xff0c;可以用箭头按钮来调节文本内容&#xff0c;也可以用键盘输入。在用按钮修改内容时可以单独修改某个部分&#xff08;年、月、日、小时、分&#xff09; …...

编程日记 2025/2/12 18:27:09

一个网站做app/爱站权重查询

Linux之ARM&#xff08;IMX6U&#xff09;BSP工程管理实验1、工程管理简介1.1、创建bsp、imx6ul、obj和project这四个文件夹1.2、文件分类2、实验程序编写2.1、创建 imx6ul.h 文件2.2、创建个.vscode文件修改includePath2.2.1、修改includePath2.3、编写led驱动文件2.2.1、 bsp…...

编程日记 2025/2/12 16:23:31