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

Vue项目的打包上线步骤

news 2025/12/16 9:01:21

Vue项目的打包上线步骤

  • 一、打包之前的路由模式
  • 二、性能分析和CDN的应用
    • 2.1 性能分析
    • 2.2 webpack排除打包
    • 2.3 CDN文件配置
    • 2.4 注入CDN文件到模板

一、打包之前的路由模式

两种路由模式

  • hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器
  • history模式：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器

改成history模式

  • src/router/index.js 创建路由文件下
// 创建路由
const createRouter = () => new Router({mode: 'history', // require service supportbase: '/hr/', // 配置项目的基础地址scrollBehavior: () => ({ y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部routes: [...constantRoutes] // 临时合并所有的路由
})
  • 此时路径地址改成
    在这里插入图片描述

二、性能分析和CDN的应用

2.1 性能分析

  • 使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析
  • 1.安装依赖 npm run preview -- --report
  • 2.得到一个地址去访问
    在这里插入图片描述
  • 方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向

2.2 webpack排除打包

  • 不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快对于插件的访问速度

使用方式

  • 1.vue.config.js的configureWebpack选项
 // 排除 elementUI xlsx  和 vue externals:{'vue': 'Vue','element-ui': 'ELEMENT','xlsx': 'XLSX'}

2.3 CDN文件配置

上边有几个大文件被排除打包了,需要采用采用CDN的方式，在页面模板中预先引入

  • vue.config.js
const 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.6.10/dist/vue.js', // vuejs// element-ui js'https://unpkg.com/element-ui/lib/index.js', // elementUI'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js','https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js']
}

根据环境变量判断是开发环境 还是生产环境 开发环境下没有必要使用CDN 只在生产环境下生效

  • vue.config.js
et cdn = { css: [], js: [] }
// 通过环境变量 来区分是否使用cdn 
const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境
let externals = {}
if (isProd) {// 如果是生产环境 就排除打包 否则不排除externals = {// key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)'vue': 'Vue', // 后面的名字不能随便起 应该是 js中的全局对象名'element-ui': 'ELEMENT', // 都是js中全局定义的'xlsx': 'XLSX' // 都是js中全局定义的}cdn = {css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 提前引入elementUI样式], // 放置css文件目录js: ['https://unpkg.com/vue@2.6.10/dist/vue.js', // vuejs'https://unpkg.com/element-ui/lib/index.js', // element'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx 相关'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js' // xlsx 相关] // 放置js文件目录}
}module.exports = {configureWebpack: {// provide the app's title in webpack's name field, so that// it can be accessed in index.html to inject the correct title.name: name,resolve: {alias: {'@': resolve('src')}},// 排除 elementUI xlsx  和 vue 包名(不去打包)externals: externals},
}

2.4 注入CDN文件到模板

之后通过 html-webpack-plugin注入到 index.html之中

  • 找到vue.config.js里面的chainWebpack节点，添加如下代码
config.plugin('html').tap(args => {args[0].cdn = cdnreturn args
})
  • 找到 public/index.html。通过你配置的CDN Config 依次注入 css 和 js
<head><!-- 引入样式 --><% for(var css of htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%=css%>"><% } %>
</head><!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %><script src="<%=js%>"></script>
<% } %>
  • 最后，进行打包 ，会在当前根目录生成一个dist的文件夹
npm run build:prod  # 或者使用yarn build:prod

相关文章：

Vue项目的打包上线步骤

Vue项目的打包上线步骤一、打包之前的路由模式二、性能分析和CDN的应用2.1 性能分析2.2 webpack排除打包2.3 CDN文件配置2.4 注入CDN文件到模板一、打包之前的路由模式 两种路由模式 hash模式 &#xff1a; #后面是路由路径&#xff0c;特点是前端访问&#xff0c;#后面的变化不…...

编程日记 2023/5/17 11:40:26

都2023了，学习自动化测试还有必要么？会不会浪费我时间

最近收到不少小伙伴私信提问&#xff0c;其中问得比较多的就是“学习自动化测试有那么重要吗&#xff1f;”。 我的回答是肯定的——很重要。 相信不少同学都有诸如此类的疑问&#xff0c;例如&#xff1a;“日常工作中好像用不上自动化&#xff1f;”、“手工点点点好像也可…...

编程日记 2023/5/12 5:31:58

银行数字化转型导师坚鹏：如何有效推进银行数字化转型工作

如何有效推进银行数字化转型工作 ——以推动银行数字化转型战略落地为核心&#xff0c;实现知行果合一课程背景&#xff1a; 很多银行都在开展银行数字化转型工作&#xff0c;目前存在以下问题急需解决&#xff1a;不清楚有效推进银行数字化转型的关键性工作&#xff1f;不…...

编程日记 2023/5/25 18:00:05

【MySQL高级篇】第09章_性能分析工具的使用

第09章_性能分析工具的使用 在数据库调优中&#xff0c;我们的目标是 响应时间更快, 吞吐量更大 。利用宏观的监控工具和微观的日志分析可以帮我们快速找到调优的思路和方式。 1. 数据库服务器的优化步骤 当我们遇到数据库调优问题的时候&#xff0c;该如何思考呢&#xff1…...

编程日记 2023/5/12 5:31:52

关于xhtml和html的区别

HTML是一种基本的WEB网页设计语言&#xff0c;XHTML是一个基于XML的置标语言&#xff0c;看起来与HTML有些相象&#xff0c;只有一些小的但重要的区别。本文简单介绍什么是XHTML&#xff0c;以及与HTML相比XHTML有什么特点。 　　1、什么是XHTML&#xff1f; 　　HTML是一种基本…...

编程日记 2023/5/13 5:31:59

原生JavaScript比较两个日期大小，项目中通用

原生JavaScript比较两个日期大小&#xff0c;项目中通用&#xff0c;具体日期比较大小一、比较两个日期大小&#xff08;月份&#xff09;1.开始时间大于结束时间2.开始时间等于结束时间3.开始时间大于结束时间二、比较两个日期大小&#xff08;日期&#xff09;代码如下&#…...

编程日记 2023/5/12 8:10:01

【JAVA真的没出路了吗？】

2023年了&#xff0c;转行IT学习Java是不是已经听过看过很多次了。随之而来的类似学Java没出路、Java不行了、对Java感到绝望等等一系列的制造焦虑的话题也在网上层出不穷&#xff0c;席卷了一大片的对行业不了解的吃瓜群众或是正在学习中的人。如果是行外人真的会被这种言论轻…...

编程日记 2023/5/25 8:06:42

PCB模块化设计11——VGA高速PCB布局布线设计规范

目录PCB模块化设计11——VGA高速PCB布局布线设计规范1、什么是VGA&#xff1f;2、VGA接口管脚定义3、VGA电缆究竟是如何工作的&#xff1f;4、VGA参考设计原理图5、PCB设计指南1、R,G,B LAYOUT注意事项2、HSYNC,VSYNC Layout注意事项3、其他注意事项PCB模块化设计11——VGA高速…...

编程日记 2023/5/13 23:55:16

【Python】【进阶篇】五、Python爬虫的抓取网页

目录五、Python爬虫的抓取网页5.1 导入所需模块5.2 获取目标URL地址5.3 向目标URL发送请求5.4 保存为本地文件5.5 优化程序五、Python爬虫的抓取网页 Python 爬虫应用案例&#xff1a;爬取目标的网页&#xff0c;并将其保存到本地。 对要编写的爬虫程序进行分析&#xff0c;可…...

编程日记 2023/5/25 8:08:11

docker安装MongoBD（超详细）

一、安装docker 推荐文章&#xff1a;https://blog.csdn.net/Sumuxi9797926/article/details/127313307?spm1001.2014.3001.5502 二、创建主机挂载配置目录 data目录存放mongodb数据库文件&#xff0c;删除重启容器不会丢失 mkdir -p /docker/mongodb/data && cd …...

编程日记 2023/5/12 13:49:59

6轴陀螺仪姿态解算

之前看过学长姿态解算相关代码&#xff0c;因为要做平衡车的项目&#xff0c;希望陀螺仪处理数据能够达到很好的效果&#xff0c;大概2个星期前&#xff0c;看的学长代码&#xff0c;当时把大部分代码看懂是用来干什么的&#xff0c;但原理还是一窍不通&#xff0c;没办法&…...

编程日记 2023/5/13 5:35:08

提升集群吞吐量与稳定性的秘诀： Dubbo 自适应负载均衡与限流策略实现解析

作者&#xff1a;刘泉禄 整体介绍 本文所说的“柔性服务”主要是指 consumer 端的负载均衡和 provider 端的限流两个功能。在之前的 Dubbo 版本中&#xff0c;负载均衡部分更多的考虑的是公平性原则&#xff0c;即 consumer 端尽可能平等的从 provider 中作出选择&#xff0c;…...

编程日记 2023/5/15 23:09:31

大数据分析工具Power BI（十七）：制作过程分析和原因分析图表

制作过程分析和原因分析图表 一、过程分析 过程分析主要分析业务流程中每一步骤的变化情况，用于分析业务流程指标数据变化、拆分业务流程、拆分关键业务指标等等。可以使用漏斗图、瀑布图来展示过程分析数据。 1、漏斗图 漏斗图常用来展示业务过程的线性变化，分析业务流程的转…...

编程日记 2023/5/16 23:37:40

公司“007”式工作的卷王测试员，被辞退了…

上周&#xff0c;公司传出同事小王被开除的消息&#xff0c;震惊了一办公室的人。要知道&#xff0c;小王在办公室素有卷王之称&#xff0c;不仅从没见他6点准点下班过&#xff0c;早上也都第一个到。平时的周报&#xff0c;也都洋洋洒洒的写了5K字之多&#xff0c;他的存在一度…...

编程日记 2023/5/15 23:10:50

C++ Primer第五版_第七章习题答案（1~10）

文章目录练习7.1练习7.2练习7.3练习7.4练习7.5练习7.6练习7.7练习7.8练习7.9练习7.10练习7.1 使用2.6.1节定义的Sales_data类为1.6节的交易处理程序编写一个新版本。 #include <iostream> #include <string> using std::cin; using std::cout; using std::endl; us…...

编程日记 2023/5/11 14:40:42

2023年全国最新保安员精选真题及答案42

百分百题库提供保安员考试试题、保安职业资格考试预测题、保安员考试真题、保安职业资格证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 421.根据《保安服务管理条例》规定&#xff0c;取得《保安员证》的身体条件是&#x…...

编程日记 2023/5/15 23:12:34

通过 DVT 和 dbt 测试监控Airbyte数据管道

为数据复制或数据迁移构建 ELT 数据管道的一个重要部分是能够在出现错误时进行监视并获得通知。如果您不知道错误&#xff0c;您的数据将包含不一致之处&#xff0c;并且您的报告将不准确。由于使用的工具数量众多&#xff0c;大多数管道的复杂性使得设置监视和警报系统更具挑战…...

编程日记 2023/5/17 2:45:19

BootStrap4：组件

一、按钮 1.1、普通按钮 Bootstrap包括多个预定义的按钮样式&#xff0c;每个样式都有自己的语义目的&#xff0c;另外还有一些额外的功能可以用于更多的控制。 样式效果&#xff1a; 源代码&#xff1a; <body class"container"><button type"bu…...

编程日记 2023/4/14 6:53:35

菜鸟也能在10分钟内开发出3D数字化城市，这份干货教程请收好！

朋友被老板要求在2周内负责一个监控用的的3D全景地图项目&#xff0c;他每天能盯着程序员加班加点的干&#xff0c;可按照进度仍然赶不上ddl。我听了他的诉求&#xff0c;联想到之前参加过的一个宣讲会里提到的新软件&#xff0c;把东西推荐给他后&#xff0c;他让同事跑了一下…...

编程日记 2023/5/15 23:14:19

【区块链技术开发】十个比较流行的以太坊智能合约开发框架

专栏：【区块链技术开发】 前期文章： 【区块链技术开发】剖析区块链Ganache模拟器工具及其智能合约部署区块链的查询方式 【区块链技术开发】基于Web3.js以太坊网络上的智能合约的交互及其应用 【区块链技术开发】OpenZeppelin智能合约库：提高智能合约的安全性和可靠性，加速…...

编程日记 2023/5/25 8:09:39

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/12/16 5:34:39

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/12/13 22:32:24

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/14 0:09:42

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/12/13 7:26:47

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/12/8 22:05:50

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/12/11 6:16:50