vite打包配置

目录


在这里插入图片描述
minify默认是esbuild,不能启动下面配置

在这里插入图片描述
使用:

plugins: [viteMockServe({mockPath: 'mock'})]

根目录新建mock/index.ts. 有例子Mock file examples:https://www.npmjs.com/package/vite-plugin-mock-server

开发环境生产环境地址替换。根目录下新建两个文件.env.development和.env.production
在这里插入图片描述

使用element-plus组件,兼容vue3:

   https://blog.csdn.net/qq_51137480/article/details/132513904

全局引入体积过大,官方提供按需引入插件unplugin-vue-components 和 unplugin-auto-import这两款插件,main.ts就不需要引入了

CDN引入:

注意package.json也需要下载包


npm install vite-plugin-cdn-import --save-dev

新版本使用:

import { Plugin as 名称} from 'vite-plugin-cdn-import'

旧版使用:

import 名称 from 'vite-plugin-cdn-import'

打包图片:

 npm i vite-plugin-imagemin -D
  viteImagemin({gifsicle: {optimizationLevel: 7,interlaced: false},optipng: {optimizationLevel: 7},mozjpeg: {quality: 20},pngquant: {quality: [0.8, 0.9],speed: 4},svgo: {plugins: [{name: 'removeViewBox'},{name: 'removeEmptyAttrs',active: false}]}})

代码压缩:

npm i vite-plugin-compression -D
viteCompression({//生成压缩包gzverbose:true,disable:false,threshold:10240,algorithm:'gzip',ext:'.gz'
})

格式化

npm eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-prettier eslint-plugin-vue -D

共享配置:

项目.vscode下面extensions.json下面。把需要推荐的搜索放进去

{"recommendations": ["Vue.volar"]
}

例如搜索安装mongo,点击扩展名打开一个链接https://marketplace.visualstudio.com/items?itemName=JoeyYiZhao.mongo-runner,把itemName后面放进去

{"recommendations": ["Vue.volar","JoeyYiZhao.mongo-runner"]
}

最后:一般新下项目直接点击 拓展里面的筛选-推荐

如果有需要在.vscode下面新建setting.json和项目本地差不多,拷贝过来有需要什么改的可以改,放进项目的好处,其他下载项目的可以直接使用这个配置。之前遇到项目做echats地图需要配置的每个开发都要设置一遍,有了这个就不需要本地配置了

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

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

相关文章

计算机是如何执行指令的

你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…

权益商城系统源码 现支持多种支付方式

简介: 权益商城系统源码,支持多种支付方式,后台商品管理,订单管理,串货管理,分站管理,会员列表,分销日志,应用配置。 上传到服务器,修改数据库信息&#xff…

软件测试与管理-白盒测试-逻辑覆盖法例题

目录 知识点: 例题 : 知识点: 语句覆盖:设计足够多的测试用例,使得被测试程序中的“ 每条可执行语句至少被执行一次” 优点:可通过源码观察直观地得到测试用例,无须细分每个判定表达式。缺点&am…

保研面试408复习 3——操作系统

文章目录 1、操作系统一、进程有哪几种状态,状态之间的转换、二、调度策略a.处理机调度分为三级:b.调度算法 标记文字记忆,加粗文字注意,普通文字理解。 为什么越写越少? 问就是在打瓦。(bushi) 1、操作系统 一、进程…

企业网站 | 被攻击时该怎么办?

前言 每天,数以千计的网站被黑客入侵。发生这种情况时,被入侵网站可用于从网络钓鱼页面到SEO垃圾邮件或者其它内容。如果您拥有一个小型网站,很容易相信黑客不会对它感兴趣。不幸的是,通常情况并非如此。 黑客入侵网站的动机与所…

后端方案设计文档结构模板可参考

文章目录 1 方案设计文档整体结构2 方案详细设计2.1 概要设计2.2 详细设计方案2.2.1 需求分析2.2.2 业务流程设计2.2.3 抽象类:实体对象建模2.2.4 接口设计2.2.5 存储设计 1 方案设计文档整体结构 一,现状:把项目的基本情况和背景都说清楚&a…

MAC 本地搭建Dify环境

Dify 介绍 Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务(Backend as Service)和 LLMOps 的理念,使开发者可以快速搭建生产级的生成式 AI 应用。即使你是非技术人员,也能参与到 AI 应用的定义和数据运营过…

Voice Conversion、DreamScene、X-SLAM、Panoptic-SLAM、DiffMap、TinySeg

本文首发于公众号:机器感知 Voice Conversion、DreamScene、X-SLAM、Panoptic-SLAM、DiffMap、TinySeg Converting Anyones Voice: End-to-End Expressive Voice Conversion with a Conditional Diffusion Model Expressive voice conversion (VC) conducts speak…

数塔问题(蛮力算法和动态规划)

题目:如下图是一个数塔,从顶部出发在每一个节点可以选择向左或者向右走,一直走到底层,要求找出一条路径,使得路径上的数字之和最大,及路径情况。(使用蛮力算法和动态规划算法分别实现) #include…

c语言从入门到函数速成(1)

温馨提醒:本篇文章适合人群:刚学c又感觉那个地方不怎么懂的同学以及以及学了一些因为自身原因停学一段时间后又继续学c的同学 好,正片开始。 主函数 学c时最先学的是我们c语言程序的主体函数,c的主函数有两种写法,这…

【Docker】★★★

docker 的网络模式 ●host模式:使用 --nethost 指定 容器与宿主机共享网络命名空间、ip和端口 ●container模式:使用 --netcontainer:NAME_or_ID 指定 新建的容器共享已有容器的网络命名空间、ip和端口 ●none模式:使用 --netnone 指定 不进行…

被问了n遍的小程序地理位置权限开通方法

小程序地理位置接口有什么功能? 在平时我们在开发小程序时,难免会需要用到用户的地理位置信息的功能,小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( getLocation ),但是在代码中却使用到了相关接口&#…

macOS sonoma 14.4.1编译JDK 12

macOS sonoma 14.4.1编译JDK 12 环境参考文档开始简述问题心路历程着手解决最终解决(前面有点啰嗦了,可以直接看这里) 记录一次靠自己看代码解决问题的经历(总之就是非常开心)。 首先,先diss一下bing,我差一点就放弃了。 环境 macOS sonom…

分布式与一致性协议之Raft算法(二)

Raft算法 什么是任期 我们知道,议会选举中的领导者是有任期的,当领导者任命到期后,需要重新再次选举。Raft算法中的领导者也是有任期,每个任期由单调递增的数字(任期编号)标识。比如,节点A的任期编号是1。任期编号会…

自定义类型

引言: C语言分为:1、内置类型 2、自定义类型: 1》结构体——每个成员有自己的空间 2》枚举型——定义多个常量 3》联合体——所有成员共用一快内存空间 一、结构体: 单独写过了一篇 关于结构体的介绍以及使用 二、 枚举型&…

论文辅助笔记:Tempo之modules/prompt.py

1 get_prompt_param_cls 2 get_prompt_value 3 Prompt 类 3.1 _init_weights 3.2 forward

表空间的概述

目录 表空间的属性 表空间的类型 永久性表空间(PermanentTablespace) 临时表空间(Temp Tablespace ) 撤销表空间(Undo Tablespace) 大文件表空间(BigfileTablespace) 表空间的状态 联机状态(Online) 读写状态(Read Write) 只读状态(Read) 脱机状态(Offline) Oracle从…

Elasticsearch初步认识

Elasticsearch初步认识 ES概述基本概念正向索引和倒排索引IK分词器ik_smart最少切分ik_max_word为最细粒度划分 ES索引库基本操作对索引库操作对文档操作 ES概述 Elasticsearch,简称为 ES,是一款非常强大的开源的高扩展的分布式全文检索引擎&#xff0c…

谁能取代迈巴赫,征服互联网安全大佬周鸿祎?

‍作者 |老缅 编辑 |德新 4月18日,「周鸿祎卖车」登上了微博热搜。这位360创始人、董事长发微博称:自己做了一个艰难的决定,将把陪伴9年的迈巴赫600给卖掉。 随后,他解释道:「这是因为我需要体验新一代车的感觉。古人…

opencv图像处理详细讲

传统的计算机视觉框架: SimpleCV BoofCV Dlib JavaCV 深度学习计算机视觉框架 Caffe Tensorflow Pytorch Paddlepaddle Keras 深度视觉计算机视觉框架 OpenVINO TensorRT onnxruntime Deepface YOLO/DarkNet mmdetection Paddle-detection/seg/ocr …