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

Vue项目的打包上线步骤

news 2025/7/9 7:29:50

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

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/8 2:49:05

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/7/8 11:51:32

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/7/8 8:13:15

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/28 13:23:48

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/6/16 14:09:54

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/7/8 13:24:57

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/7/6 22:13:17

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2025/7/9 2:21:59

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/7/6 5:56:02