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

Vue项目的打包上线步骤

news 2026/2/7 13:22:17

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/1 11:44:45

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05