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

Vue项目的打包上线步骤

news 文章来源：https://blog.csdn.net/Gik99/article/details/129833301 2025/5/14 20:16:55

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

Linux三剑客之grep命令详解

1、概述 Linux三剑客&#xff1a;grep、sed、awk。grep主打查找功能&#xff0c;sed主要是编辑行&#xff0c;awk主要是分割列处理。本篇文章我们详细介绍grep命令。 grep &#xff08;global search regular expression(RE) and print out the line&#xff0c;全面搜索正则…...

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

【Python】【进阶篇】二、Python爬虫的User-Agent用户代理

目录二、Python爬虫的User-Agent用户代理2.1 常见的 User-Agent 请求头2.2 爬虫程序UA信息2.3 重构爬虫UA信息二、Python爬虫的User-Agent用户代理 User-Agent 即用户代理&#xff0c;简称“UA”&#xff0c;它是一个特殊字符串头。网站服务器通过识别 “UA”来确定用户所使用…...

编程日记 2023/5/13 5:37:20

ORBSLAM3 --- 双目惯导执行ORBSLAM3（一）：Stereo_intertail_euroc.cc文件解析

1.执行双目例程的参数 在Clion中&#xff0c;我们输入以下参数&#xff1a; /home/liuhongwei/Desktop/slam/ORB_SLAM3_detailed_comments-master/Vocabulary/ORBvoc.txt /home/liuhongwei/Desktop/slam/ORB_SLAM3_detailed_comments-master/Examples_old/Stereo-Inertial/EuRo…...

编程日记 2023/5/25 8:12:27

五 MySQL 存储过程

五、企业级开发技术 5.1 存储过程 关于存储过程我只能说请看下图&#xff0c;这是阿里巴巴发布的《阿里巴巴Java开发手册&#xff08;终极版&#xff09;v1.3版本》在 MySQL 第七条中强制指出禁止使用存储过程 所以对于存储过程不必深究&#xff0c;做到会写能看懂即可 [外链…...

编程日记 2023/4/19 14:05:31

【指针函数和函数指针】

指针函数和函数指针1. 概述2. 案例分析指针函数函数指针1. 概述 函数指针和指针函数是两个不同的概念。 函数指针是指一个指针变量&#xff0c;该指针变量存储了一个函数的地址。通过函数指针可以实现动态调用函数&#xff0c;根据需要在程序运行时指定要调用的函数。函数指针的…...

编程日记 2023/4/11 15:41:06

实现卡片高度增加时的缓动动画效果

在开发中&#xff0c;我们可能会遇到需要让卡片高度由内容撑起&#xff08;即不能手动设置height&#xff09;&#xff0c;并且在高度增加时增加缓动动画的需求。本文将介绍几种实现方式。 文章目录方法1&#xff1a;使用CSS的max-height属性和:hover伪类特定例子&#xff1a;鼠…...

编程日记 2023/4/17 13:48:19

什么是HRMS？哪些工作需要使用HRMS？

当今企业的发展离不开技术支持&#xff0c;同样&#xff0c;在管理方面也需要与时俱进&#xff0c;进行数字化转型。人力资源技术的运用是企业管理数字化转型的重要表现之一。在企业选择一款HR软件之前&#xff0c;应该先认识到&#xff0c;什么是人力资源管理软件——即HRMS。…...

编程日记 2023/5/16 7:23:16

【C语言蓝桥杯每日一题】—— 饮料换购

【C语言蓝桥杯每日一题】—— 饮料换购&#x1f60e;前言&#x1f64c;饮料换购&#x1f64c;喝汽水问题&#x1f64c;饮料换购解题源码分享 &#x1f60a;总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的…...

编程日记 2023/5/25 8:16:04

PMP适合哪些人考？

其实很多小白在最开始了解PMP考试的时候都会有同一个问题&#xff0c;那就是&#xff1a; “我适不适合考PMP&#xff1f;” 如果想做管理&#xff0c;那么一定要考PMP证书。PMP证书是国际认证&#xff0c;在国内的认可度也很高&#xff0c;可以说是管理岗位的入门认证。注意…...

编程日记 2023/5/17 2:47:51

中华好诗词大学季第二季（二）

第四期 1,宋代林升的《题临安邸》是一首著名的墙头诗&#xff0c;请问这里的”邸“指的是什么&#xff1f;旅店 2,宋代林升的《题临安邸》的“临安”是指那个城市&#xff1f;杭州 3,“申黜褒女进&#xff0c;班去赵姬升”具体写到了历史上那四个女人 申皇后&#xff0c;褒…...

编程日记 2023/4/19 14:08:11