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.mzph.cn/web/5292.shtml

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

相关文章

spark实验求TOP值

实验1:求TOP值 已知存在两个文本文件,file1.txt和file2.txt,内容分别如下: file1.txt 1,1768,50,155 2,1218, 600,211 3,2239,788,242 4,3101,28,599 5,4899,290,129 6,3110,54,1201 7,4436,259,877 8,2369,7890,27 fil…

活性炭复合纳米纤维膜

活性炭复合纳米纤维膜是一种结合了活性炭和纳米纤维技术的新型复合材料。这种材料通常通过特定的制备工艺,如静电纺丝技术,将活性炭纳米纤维与其他材料(如TiO2、聚合物等)结合在一起,形成具有良好结构和功能的薄膜。 活…

UDP!!!

UDP!!! 一 : 传输层的协议:二 : UDP2.1 UDP长度2.2 UDP校验和2.2.1 : 为什么会出现传输出错的情况??2.2.3: 对数据进行校验的方式CRCmd5 三 : UDP的适用场景 一 : 传输层的协议: 传输层的协议有UDP,TCP UDP:无连接,不可靠传输,面向数据报,全双工 TCP:有连接,可靠传输,面向字…

nvm 切换 Node 版本失败

创建vue3项目时,需要切换到更高版本的 node,于是使用 nvm (node 包版本管理工具)进行版本切换 切换版本时,显示成功,但再次查看当前 node 版本时,发现没切换过来。 解决方法: where node 查看node的安装…

vue路由(路由基本使用,传参,多级路由)

目录 vue-router简介路由配置和使用嵌套(多级)路由路由传参方式1:路由的query参数方式2:路由的params参数props配置 命名路由取消路由组件在前进后退 vue-router简介 vue的一个插件库,专门用来实现SPA应用 路由配置…

2024年这样做抖音小店,操作简单,起店稳定!

大家好,我是电商糖果 不少朋友说跟糖果抱怨过,说抖音小店越来越难做了。 平台的规则越来越多,商家运营店铺的时候,很容易出现违规预警。 糖果是2020年开始做的抖音小店,现在已经经营了多家小店。 实话实说确实比之…

行为型设计模式

一、责任链设计模式 (一)概念 使多个对象都有机会处理同一个请求,从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。 (二&#xf…

OpenHarmony实战开发-如何实现绘制路径、并填充颜色实现饼状图效果。

Svg组件绘制路径时&#xff0c;通过Path中的M&#xff08;起点&#xff09;、H&#xff08;水平线&#xff09;、a&#xff08;绘制弧形到指定位置&#xff09;路径控制指令&#xff0c;并填充颜色实现饼状图效果。 <!-- xxx.hml --> <div class"container"…

visionPro链接相机

搜索Cognex GigE Vision Configura… 修改子网掩码为255.255.255.0 配置驱动程序 更新驱动&#xff08;如果能够选择9014Bytes&#xff0c;跳过此步骤&#xff09; 更新更改 相机ip配置 打开visionPro 选择照相机 查看实时画面 运行保存图像

微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑(二)

大家好&#xff0c;我是程序员大猩猩。 上次我们实践了&#xff0c;Java后端如何完成SockJSStomp的配置实现。 微服务使用SockJsStomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑&#xff08;一&#xff09; 那么今天我们做一下web vue端的是如何来实现…

Java浮点类型和计算“精度丢失”原因

引言 在计算机科学领域中,浮点数是一种用于表示近似实数的数据类型,广泛应用于科学计算、工程设计、金融建模等领域。在日常编程中,我们经常会遇到浮点数的计算和处理,然而,由于浮点数在计算机中的存储和表示方式,以及二进制与十进制之间的转换问题,可能会导致计算精度…

现代机器学习(ML)技术在医疗成像领域的新应用

现代机器学习(ML)技术在医疗成像领域的新应用主要包括以下几个方面: 一、自动病变检测 使用深度学习算法,尤其是卷积神经网络(CNN),自动识别和分类医学影像中的病变,如肿瘤、炎症等。自动病变检测是现代机器学习技术在医疗成像领域应用的一个重要方向。它主要通过以下…

hive-row_number() 和 rank() 和 dense_rank()

row_number() 是无脑排序 rank() 是相同的值排名相同&#xff0c;相同值之后的排名会继续加&#xff0c;是我们正常认知的排名&#xff0c;比如学生成绩。 dense_rank()也是相同的值排名相同&#xff0c;接下来的排名不会加。不会占据排名的坑位。

智能私信软件:转化率提升的神器

在数字化营销领域&#xff0c;利用智能私信软件策略提升转化率已经成为一种不可忽视的趋势。随着人工智能技术的发展&#xff0c;这些软件变得越来越智能&#xff0c;能够根据用户的行为和偏好提供个性化的沟通体验。在这篇文章中&#xff0c;我们将探讨如何有效地运用智能私信…

Leetcode_相交链表

✨✨所属专栏&#xff1a;LeetCode刷题专栏✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 题目&#xff1a; 题解&#xff1a; 看到这个题目首先我们要排除链表逆置的想法&#xff0c;如图、因为c1节点只有一个next指针&#xff0c;逆置后不可能同时指向a2和b3节点。 其次有的的同学…

【RabbitMQ】可靠性策略(幂等,消息持久化)

MQ可靠性策略 发送者的可靠性问题生产者的重连生产者确认 MQ的可靠性数据持久化Lazy Queue 消费者的可靠性问题消费者确认机制消息失败处理 业务幂等性简答问题 发送者的可靠性问题 生产者的重连 可能存在由于网络波动&#xff0c;出现的客户端连接MQ失败&#xff0c;我们可以…

VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选

html部分 <template><div class"hello"><el-form :model"elForm"> <!-- cities对象数组形式 --><el-form-item v-for"(item, topIndex) in cities" :key"topIndex"> <!--item.checked 是每一个item…

最新游戏陪玩语音聊天系统3.0商业升级独立版本源码+搭建教程

首发价值29800元的最新商业版游戏陪玩语音聊天系统3.0商业升级独立版本源码。 下 载 地 址 &#xff1a; runruncode.com/php/19748.html 1. 新增人气店员轮播功能。 2. UI界面优化&#xff0c;包括游戏图标展示和分类展示的改进。 3. 增加动态礼物打赏功能。 4. 新增礼…

SQL底层执行过程

MySQL 的查询流程 客户端请求连接器 负责与客户端的通信,是半双工模式&#xff08;半双工(Half Duplex)数据传输指数据可以在一个信号载体的两个方向上传输,但是不能同时传输。&#xff09;&#xff0c;验证请求用户的账户和密码是否正确&#xff0c;③如果用户的账户和密码验…

Codigger数据篇(下):数据安全的全方位保障

在数字化浪潮中&#xff0c;数据已成为现代企业的核心财富。Codigger作为领先的数据服务平台&#xff0c;深知数据安全对于用户的重要性&#xff0c;因此在深挖数据价值的同时&#xff0c;我们始终坚守数据安全防线。 一、双重加密技术保障 Codigger平台运用先进的加密通信和…