vue-打包

打包的作用

说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了=>脚手架不参与上线

打包的作用:

1)将多个文件压缩合并成一个文件

2)语法降级

3)less sass ts语法解析

打包后,可以生成,浏览器能够直接运行的网页=>就是需要上线的源码

打包的命令和配置

说明:vue脚手架工具已经提供了打包命令,直接使用即可

命令:yarn build

结果:在项目的根目录会自动创建一个文件夹'dist',dist中的文件就是打包后的文件,放到服务器中即可

配置:默认情况下,需要放到服务器根目录打开,如果希望双击运行,需要配置publicPath配成相对路径

publicPath: './'

配置好后再使用命令打包,就可以本地双击打开或者不用放到根目录也能正常打开

路由懒加载

说明:当打包构建应用时,Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

异步组件改造

判断:与首页相关的页面默认加载,无需更改;不与首页相关的页面进行改造

改造完后,懒加载的页面需要往下放

完成后,再重新使用打包命令,懒加载实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频号小店全新赛道,新手如何入驻?

我是电商珠珠 视频号小店为视频号团队所研发。距今为止也才发展了一年时间,在23年下半年掀起了不小的浪花。 我做视频号小店也有一年时间了,在他刚开始三个月的时候,就开始带着团队一起做。到现在也拥有了自己的视频号小店运营团队&#xf…

【LeetCode每日一题】2487. 从链表中移除节点(调用栈+递归+翻转链表)

2024-1-3 文章目录 [2487. 从链表中移除节点](https://leetcode.cn/problems/remove-nodes-from-linked-list/)方法一:调用栈方法二:递归方法三:翻转链表 2487. 从链表中移除节点 方法一:调用栈 1.将所有节点按顺序压入栈中 2.从…

【 Rosetta:多目标抗体设计全攻略】

Rosetta,一个在抗体设计界具有划时代意义的软件,被誉为抗体设计界的封神之作。它由美国华盛顿大学开发,旨在通过计算机模拟技术,快速、准确地预测抗体的结构和性质,为抗体药物研发提供了强有力的支持。 在抗体设计领域…

力扣232. 用栈实现队列

题目 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作(push、pop、peek、empty): 实现 MyQueue 类: void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元素int peek() 返回队列开…

贪心算法day03

1005.K次取反后最大化的数组和 本题简单一些,估计大家不用想着贪心 ,用自己直觉也会有思路。 代码随想录 给定一个整数数组 A,我们只能用以下方法修改该数组:我们选择某个索引 i 并将 A[i] 替换为 -A[i],然后总共重…

Linux进程管理和计划任务

前言 上篇关于进程管理命令使用说明尚未完结,本篇将继续介绍相关命令以及计划任务管理。 目录 前言 一、控制进程 1. vmstat 2. free 3. iostat 4. iotop/iftop 5. uptime 6. mpstat 7. dstat 8. webadin 9. 服务器五大性能 二、进程管理 1. 手动…

跨国公司为什么要部署SD-WAN

随着全球化进一步加深,越来越多的企业开始实施跨国战略,但要在各个地区建立分支机构、数据中心,跨国企业可能会遇到各地区之间网络性能差异大、导致数据传输效率低下的问题,而且由于网络场景复杂,网络设备和运维成本高…

Django 6 后台与便签

1. 什么是后台管理 后台管理是网页管理员利用网页的后台程序管理和更新网站上网页的内容。各网站里网页内容更新就是通过网站管理员通过后台管理更新的。 2. 创建超级用户 1. python .\manage.py createsuperuser 2. 输入账号密码等信息 Username (leave blank to use syl…

【一】CocosCreator引擎启动流程

游戏的入口函数就是在main.js,main.js文件内部会调用一个window.boot(),而此方法主要是加载启动场景所需要的东西,如:cc.assetManager.init(...):初始化 AssetManagercc.assetManager.loadScript(...):加载 src 目录下…

对图片进行数据增强(基于pytorch)

背景 在进行机器学习的任务中,我们的训练数据往往是有限的,在有限的数据集上获得较好的模型训练结果,我们不仅要在模型结构上下功夫,另一方面也需要对数据集进行数据增强 图片数据增强 图像数据增强是一种在训练机器学习和深度学…

计算化学顶刊封面!玻色量子联合上海交大张健课题组发表量子计算重要成果

​2023年12月13日,北京玻色量子科技有限公司(以下简称“玻色量子”)联合上海交通大学在中科院分区1区、计算化学领域Top刊物JCTC(Journal of Chemical Theory and Computation)内刊的封面上发表了以“Encoding Molecul…

【ceph】使用 upmap 在 OSD 上手动重新平衡数据,比前面用reweight、balance香多了

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…

国内CRM系统哪个品牌比较好?

国内CRM系统哪个品牌比较好? 作为简道云第一个以“独立套件”开发出来的业务系统,对于简道云CRM我从来都是“昂首挺胸”的骄傲和自豪的! 下面就从功能、价格、自定义3大块儿来介绍下简道云CRM管理系统! CRM管理系统,即开即用​…

单位转换工具类

单位转换工具类 1. 工具类转换- 定义装换枚举转换类型- 创建转换工具类,1. 通过反射去除字段,2.对照传入map标记的字段需要转换的类型转换3. 重新赋值 2. 注解转换- 定义注解- 解析注解 1. 工具类转换 - 定义装换枚举转换类型 public enum UnitConvertType {/*** 精确度*/ACC…

【AI】使用LoFTR进行图像匹配测试Demo

LoFTR图像匹配的源码解析我们在上篇文章中已经写了,对于怎么试用一下,我这边再啰嗦一下。 0.环境搭建 详细的搭建教程请点击链接查看,这里只对需要特殊注意的地方做阐述 1.创建的Python环境采用python3.8的环境,因为文章发布较早…

性价比window+Linux二合一主机

一边学习,一边总结,一边分享! 写在前面 我在2023年12月组了一台“洋垃圾”的主机,一边当做台式机使用,一边当做服务器使用。这个方案算是相对比较划算的方案。我开始是打算直接单做服务器使用的,以及内存配的很高,但是后面和同事一起商量后,还是接受了后面的方案。大…

来自云仓酒庄分享为什么同一种葡萄会使用不同的名称?

如果你只是刚刚走进葡萄酒世界,走在葡萄酒通道上可能会令人生畏,因为有不同的国家、地区和生产商,除此之外还有数千酿酒葡萄品种。更令人困惑的是,有些地方对同一种葡萄使用不同的名称!一个著名的例子是西拉和它澳大利…

2下载Spring,第一个Spring程序+Log4j

https://www.yuque.com/dujubin/ltckqu/kipzgd#,注意的是,现在(202401)SpringFramework从release搬到了snapshot下,在这下面找到6.0.2下载. 下载后解压到文件夹,整个框架包含非常多jar包。 然后就可以在p…

工业物联网中的网络建设是如何实现的?——青创智通工业物联网

在工业物联网的应用中,如何进行网络建设,对于青创智通工业物联网来说,车间内所有装备均可通过与OPC UA网关连接实现数据采集,OPC UA网关实现Modbus协议、DLT645协议、BACnet协议、CJ188协议、三菱协议、西门子协议、Mbus协议。 通…

信号强度功能 界面、逻辑和图标(免费)

信号强度 需求 vue项目,需要实时监控系统信号,要求: 1.共五格信号; 2.信号0-100为满值,信号100-500为四格,信号500-1000为三格,信号1000-5000为两格,信号5000-20000为一格&#x…