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

Vue项目的打包上线步骤

news 2025/10/15 9:10:06

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/10/13 16:34:14

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/9/28 20:25:11

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/9/28 3:31:02

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/10/4 11:20:42

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/10/6 22:43:14

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/10/6 17:39:55

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/9/12 8:21:45

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/9/28 3:38:42

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/9/28 5:03:11