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

Vite 了解

1、vite 与 create-vite 的区别

 2、vite 解决的部分问题

3、vite配置文件的细节

3.1、vite语法提示配置

3.2、环境的处理

3.3、环境变量

上图补充

使用

 3.4、vite 识别,vue文件的原理

简单概括就是,我们在运行 npm润dev 的时候,vite 会搭起一个node服务器, 然后我们请求.vue文件的时候,在返回体中,会将.vue文件,当做js来处理,返回 也就是设置 返回类型是 text/javascript,也就是.vue文件里面的内容会在node服务器转成js

3.5、vite 处理Css

3.6、样式相关配置

 3.7、别名配置

使用,主要就是用于简写路径,特别是一些静态资源的引入

 3.8、生产打包相关的部分配置

3.9、vite 插件

vite-plugin-mock 插件

所以需要安装npm install mockjs  -D ,下面mock 使用

mock文件夹下的index.js文件

4、vite性能优化

4.1、分包策略 

概念

配置

4.2、gzip压缩

概念

安装一个插件 vite-plugin-compression 插件

配置

4.3、动态导入

概念

一般用于 tab 和 路由,或者一些静态资源 如icon 图片等

配置(是es6 新特性)

4.4、cdn加速

概念

配置

 需要安装 vite-plugin-cdn-import 插件

这样就可以减少我们打包后的代码体积了,这个是用在我们的生产环境的,开发环境不需要

5、vite 处理跨域

相关概念:浏览器的同源策略:协议、域名、端口其一不一致,就会发生跨域,是在请求返回的时候发生的

配置

相关文章:

Vite 了解

1、vite 与 create-vite 的区别 2、vite 解决的部分问题 3、vite配置文件的细节 3.1、vite语法提示配置 3.2、环境的处理 3.3、环境变量 上图补充 使用 3.4、vite 识别,vue文件的原理 简单概括就是,我们在运行 npm润dev 的时候,vite 会搭起…...

oracle常用通用sql脚本——查询前用户的表空间信息

oracle常用通用sql脚本——查询前用户的表空间信息 一、查询前用户的表空间信息1、 查询当前用户的所有表空间2、 已G为单位3、 已MB为单位 二、以上俩段sql查出结果集存在差异的原因 一、查询前用户的表空间信息 1、 查询当前用户的所有表空间 SELECT * FROM dba_tablespace…...

Python内置类属性`__name__`属性的使用教程

更多Python学习内容:ipengtao.com Python中的__name__是一种内置的特殊属性,通常用于判断模块是作为主程序运行还是作为模块被导入。本文将深入讲解__name__属性的用法,通过丰富的示例代码展示其在不同情景下的应用。 模块作为主程序运行 当一…...

BUUCTF-pwn-ciscn_2019_ne_51

简单查看保护: 32为程序没有canary没有PIE,应该是简单的栈溢出。我们照着这个思路去找溢出点在哪,运行下程序看看什么情况: 程序上来是输入一个密码验证。随便输入下错误直接退出。因此我们需要到IDA中看看怎么回事: 主…...

【限时免费】20天拿下华为OD笔试之【哈希表】2023Q2B-选修课【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入输出示例一输入输出说明 示例二输入输出说明 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 现有两门选修课,每门选修课都有一部分学生选修,每个学生都有…...

Android关于杀掉进程的方案

《风波莫听穿林打叶声》—— 苏轼 〔宋代〕 三月七日,沙湖道中遇雨,雨具先去,同行皆狼狈,余独不觉。已而遂晴,故作此词。 莫听穿林打叶声,何妨吟啸且徐行。 竹杖芒鞋轻胜马,谁怕?一蓑…...

mysql数据库基本概念简介

概述 为什么要使用数据库? 答:实现数据的持久化。 数据库存储类型多样,存储量大。由于其他文件等介质。 概念 DB:database(数据库),保存数据的仓库,本质是一个文件系统。 DBMS:数据库管理系统,常说的Mysql数…...

前端开发_HTML

简介 CSS用于美化内容 HTML用于摆放内容 可以理解为HTML是基础&#xff0c;CSS是工具 HTML定义 HTML 超文本标记语言——HyperText Markup Language 超文本——链接 标记——标签&#xff0c;即带尖括号的文本 标签语法 双标签 开始标签&#xff1a; <xxx> 即尖…...

1.Spring源码解析-ClassPathXmlApplicationContext

此类是读取spring的xml配置文件并解析。也是源码入口之一。 我们调试即将开始。 传递给父类设置值 经调试我们得到是给AbstractApplicationContext设置默认的应用上下文父级的值&#xff0c;很明显是空 给父类AbstractRefreshableConfigApplicationContext设置属性 刷新容器…...

android 动态创建selector状态选择器 动态创建Drawable

最近在做一个使用接口返回的字符串&#xff1a;"#ff0000" 来动态设置drawable背景颜色与动态设置状态选择器selector的需求&#xff0c;之前写习惯了shape的xml&#xff0c;还是第一次写动态的&#xff0c;有点搞笑&#xff0c;搞笑的是自己没写过&#xff0c;不知道…...

Python与设计模式--责任链模式

23种计模式之 前言 &#xff08;5&#xff09;单例模式、工厂模式、简单工厂模式、抽象工厂模式、建造者模式、原型模式、(7)代理模式、装饰器模式、适配器模式、门面模式、组合模式、享元模式、桥梁模式、&#xff08;11&#xff09;策略模式、责任链模式、命令模式、中介者模…...

(C)一些题6

1.正确定义符号常量PI的宏定义为 A.define PI 3.14 B.define PI 3.14: C。#define PI 3.14 D #define PI 3.14&#xff1b; 2。关于字符数组的描述中错误的是() A.字符数组可以存放字符串 B.字符数组中的字符串可以整体输入和输出 C。可以在赋值语句中通过运算符“”对…...

基于单片机的肺活量检测系统(论文+源码)

1.系统设计 在基于单片机的肺活量检测系统中&#xff0c;在硬件上整个系统通过利用主控制器STC89C52单片机来实现对整个系统进行控制的功能&#xff0c;通过采用LCD1602实现实时液晶显示数据的功能&#xff0c;通过肺活量传感器XGZP6847ADC0832实现监测肺活量的工作&#xff0…...

【开题报告】海洋多源数据质量控制应用服务的WebServer设计与实现

开 题 报 告 内 容 论文选题的意义、主要研究内容和文献资料调研情况 一、选题意义 在当今世界研究自然环境的大背景下&#xff0c;计算机技术与各学科、各领域的综合应用逐渐增多。作为地球上最广阔的水体&#xff0c;同时也是地球上决定气候发展的主要的因素之一&#xff0…...

接单平台在精不在多,劝诸位程序员找个好平台!

程序员想找兼职搞副业&#xff0c;结果知乎上逛了一大圈&#xff0c;各种平台推荐&#xff0c;可以说是眼花缭乱。要么就是平台一搜&#xff0c;各种劝退&#xff01;好好好&#xff0c;就问一句&#xff0c;还搞不搞&#xff1f;Of course~有钱还不赚的是傻子。加班摸鱼的时候…...

mybatis关于namespace以及id以及Mapper接口命名的说明(了解)

1、建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUES("tom",200.33); INSERT INTO…...

MySQL中的锁(简单)

目录 1. 共享锁&#xff08;Shared Lock&#xff09;&#xff1a; 2. 排他锁&#xff08;Exclusive Lock&#xff09;&#xff1a; 3. 行级锁&#xff08;Row-Level Lock&#xff09;&#xff1a; 4. 页级锁&#xff08;Page-Level Lock&#xff09;&#xff1a; 5. 表级锁…...

【独家OD2023C卷真题】20天拿下华为OD笔试【贪心】2023C-分配土地最大面积【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述备注示例一输入输出说明 示例二输入输出说明 解题思路单种颜色的最小覆盖面积多种颜色的最小覆盖面积 代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 从前有个村庄&#xf…...

省市区编码sql

CREATE TABLE area (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键,code varchar(64) COLLATE utf8mb4_bin DEFAULT NULL COMMENT 编码,name varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT 名称,parent_code varchar(64) COLLATE utf8mb4_bin DEFAULT NULL CO…...

实现电商平台与营销系统无缝集成:雅座的无代码开发与API连接

无代码开发&#xff1a;营销的新引擎 在数字化转型的浪潮中&#xff0c;无代码开发已成为企业提升效率、减少成本的新引擎。这种开发方式允许非技术人员通过图形界面构建应用程序&#xff0c;无需编写代码即可实现复杂功能。这对于营销、广告推广以及用户运营等业务尤为重要&a…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...