vue-打包

打包的作用

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

打包的作用:

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

2)语法降级

3)less sass ts语法解析

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

打包的命令和配置

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

命令:yarn build

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

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

publicPath: './'

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

路由懒加载

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

异步组件改造

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

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

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

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

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

相关文章

liunx操作系统基础及进阶

一、基础入门 1、Linux系统简介 什么是Liunx? Linux在设计之初,是一个基于POSIX的多用户、多任务并且支持多线程和多CPU的操作系统,它是由世界各地成千上万的程序员设计和开发实现; 在当今社会,Linux 系统主要被应…

【智慧零售】东胜物联蓝牙网关硬件解决方案,促进零售门店数字化管理

依托物联网(IoT)、大数据、人工智能(AI)等快速发展,数字化和智能化已成为零售企业的核心竞争力。更多的企业通过引入人工智能、大数据等先进技术手段,提高门店运营效率和服务质量。 某连锁咖啡企业牢牢抓住…

[嵌入式C][入门篇] 快速掌握基础(9个语句)

开发环境: 网页版:跳转本地开发(Vscode):跳转 文章目录 一、基础语法(1)if (如果)示例1: 普通使用 if示例2: 带否则 else示例3: 否则如果 else if (2)switch case (选择)规则示例1: &#xff0…

谷歌浏览器 模拟定位

注意事项: 如果要清除位置信息,需将Geolocation修改为No override模拟定位之后需要刷新页面,网页才会生效如果模拟定位,一段时间没有操作,就会清空模拟定位,类似于No override

ubuntu远程桌面连接之novnc

一、前言 该操作是为了实现vnc桌面连接为url连接方式,且在浏览器中可以对ubuntu进行操作。在使用novnc进行操作前,需要先安装vnc才可。ubuntu下如何安装vnc,可看博主前面写的一篇文,ubuntu远程桌面连接之vnc-CSDN博客,…

案例074:基于微信小程序的儿童预防接种预约管理系统

文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder …

物流实时数仓:数仓搭建(DWS)一

系列文章目录 物流实时数仓:采集通道搭建 物流实时数仓:数仓搭建 物流实时数仓:数仓搭建(DIM) 物流实时数仓:数仓搭建(DWD)一 物流实时数仓:数仓搭建(DWD&am…

22款奔驰GLE450升级香氛负离子 车载香薰

相信大家都知道,奔驰自从研发出香氛负离子系统后,一直都受广大奔驰车主的追捧,香氛负离子不仅可以散发出清香淡雅的香气外,还可以对车内的空气进行过滤,使车内的有害气味通过负离子进行过滤,达到车内保持清…

神经网络:经典模型热门模型

在这里插入代码片【一】目标检测中IOU的相关概念与计算 IoU(Intersection over Union)即交并比,是目标检测任务中一个重要的模块,其是GT bbox与pred bbox交集的面积 / 二者并集的面积。 下面我们用坐标(top&#xff0…

Oracle导出CSV文件

利用spool spool基本格式: spool 路径文件名 select col1||,||col2||,||col3||,||col4 from tablename; spool off spool常用的设置: set colsep ;    //域输出分隔符 set echo off;    //显示start启动的脚本中的每个sql命令,缺…

ROS学习记录:在ROS中用C++实现激光雷达避障

前言 本文建立在成功获取激光雷达数据的基础上&#xff0c;详细参考 在ROS中用C实现获取激光雷达的数据 一、实现思路 二、在VScode中打开之前编写好的lidar_node.cpp 三、在lidar_node.cpp中写入如下代码 #include <ros/ros.h> #include <std_msgs/String.h> …

k8s---pod的生命周期

pod的相关知识 pod是k8s中最小的资源管理组件 pod也是最小化运行容器化的应用的资源管理对象 pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合。 k8s中pod的两种使用方式 &#xff08;1&#xff09;一个pod中运行一个容器。"每个po中一个容器&…

知虾会员**成为知虾会员,尊享专属权益**

在当今繁忙的生活中&#xff0c;线上购物已经成为现代人们的主要消费方式之一。而作为线上购物平台的领军者之一&#xff0c;Shopee为了提供更加个性化和便利的购物体验&#xff0c;推出了知虾会员&#xff08;Shopee会员&#xff09;服务。知虾会员不仅可以享受到一系列会员专…

国产化软硬件升级之路:πDataCS 赋能工业软件创新与实践

在国产化浪潮的推动下&#xff0c;基础设施软硬件替换和升级的需求日益增长。全栈国产化软硬件升级替换已成为许多领域中的必选项&#xff0c;也引起了数据库和存储领域的广泛关注。近年来&#xff0c;虽然涌现了许多成功的替换案例&#xff0c;但仍然面临着一些问题。 数据库…

某音关键词搜索商品接口,某音关键词搜索商品列表接口,宝贝详情页接口,某音商品比价接口接入方案

要接入API接口以采集电商平台上的商品数据&#xff0c;可以按照以下步骤进行&#xff1a; 1、找到可用的API接口&#xff1a;首先&#xff0c;需要找到支持查询商品信息的API接口。这些信息通常可以在电商平台的官方文档或开发者门户网站上找到。 2、注册并获取API密钥&#x…

界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验&#xff0c;这个UI自建库提供了一套全面的原生Blazor UI组件&#xff08;包括Pivot Grid、调度程序、图表、数据编辑器和报表等&#xff09;。 在这篇文章中&#xff0c;我们将介…

Golang 通用代码生成器仙童已发布 2.4.0 电音仙女尝鲜版三及其介绍视频,详细介绍了 Oracle 代码生成

Golang 通用代码生成器仙童已发布 2.4.0 电音仙女尝鲜版三及其介绍视频&#xff0c;详细介绍了 Oracle 代码生成 Golang 通用代码生成器仙童已发布 2.4.0 电音仙女尝鲜版三及其介绍视频。详细介绍了 Oracle 代码生成。即生成后端数据库为 Oracle 的 golang web 代码。并同时生…

解决SyntaxError: future feature annotations is not defined,可适用其他包

方法&#xff1a;对报错的包进行降级 pip install tikzplotlib0.9.8site-packages后面是使用pip install安装的包&#xff0c;根据这个找到报错的包 想法来源&#xff1a; 环境是python3.6&#xff0c;完全按照作者要求进行环境配置&#xff0c;但仍报错。 我在网上找的解决…

使用Redis进行搜索

文章目录 构建反向索引 构建反向索引 在Begin-End区域编写 tokenize(content) 函数&#xff0c;实现文本标记化的功能&#xff0c;具体参数与要求如下&#xff1a; 方法参数 content 为待标记化的文本&#xff1b; 文本标记的实现&#xff1a;使用正则表达式提取全小写化后的…

阿里云服务器Valheim端口2456、2457和2458放行设置

使用阿里云服务器搭建Valheim英灵神殿需要开启2456-2458端口&#xff0c;阿里云服务器默认只开放了22核3389端口&#xff0c;开通2456端口是在安全组中配置的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器安全组开通端口流程&#xff1a; 阿里云服务器安…