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,一经查实,立即删除!

相关文章

P9586 「MXOI Round 2」游戏

「MXOI Round 2」游戏 题目描述 小 C 和小 D 正在玩一款蒸蒸日上的游戏。 这款游戏共有 3 3 3 种手牌:杀、闪、斩。他们的用途分别如下: 杀:对对方使用,对方需要使用一张闪,否则对方输掉游戏;或回应对方…

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…

记录一些容易遗忘的东西

文章目录 native、sync 修饰符this.$nextTick native、sync 修饰符 native :在对子组件使用 click 的时候若不使用该修饰符,那么就不能执行点击事件,会被判断为子向父组件传的值sync : 类似于 v-model 的响应式修饰符&#xff0c…

活性炭复合纳米纤维膜

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

白帽子讲Web安全读书笔记

-- 书的结构 4大篇共18章: 我的安全世界观:安全历史->作者对安全的看法与态度->思考问题的方式和做事的方法客户端脚本攻击:对浏览器的深入理解将有助于做好该解决方案服务端应用安全:网站安全建设之初的重点处理问题大安…

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年开始做的抖音小店,现在已经经营了多家小店。 实话实说确实比之…

MySQL面试题:经典面试题之“B+树”

在MySQL数据库领域,B树是一个经典的数据结构,它在数据库索引中发挥着重要的作用。本文将深入探讨B树的概念、特点以及在MySQL中的应用,帮助程序员更好地理解和掌握这一重要的数据结构。 1. B树的概念 B树是一种平衡的多路搜索树&#xff0c…

行为型设计模式

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

Gone框架介绍1 - 在go语言上实现依赖注入,Gone是如何实现的?

文章目录 Goner的定义在Gone中是如何完成依赖注入的? 我在两年前实现了一个Golang的依赖注入框架,并且集成了gin、xorm、redis、cron、消息中间件等功能,自己觉得还挺好用的;之前一直没有时间写文档推广,现在"毕业…

vscode相关插件使用----持续更新中

一、VSCode(Visual Studio Code)常用的插件: Vetur/Volar:用于Vue.js项目的开发,提供语法高亮、智能感知等功能。ESLint:用于JavaScript代码的语法检查和风格检查,支持多种编码规范。Prettier …

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

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

MongoDB聚合运算符:$stdDevPop

MongoDB聚合运算符&#xff1a;$stdDevPop 文章目录 MongoDB聚合运算符&#xff1a;$stdDevPop语法使用非数值类型的值单个值数组操作数窗口值 举例应用于$group阶段在$project阶段使用在$setWindowFields阶段使用 $stdDevPop聚合运算符用来计算输入值的总体标准差。如果确认数…

构造函数中return的几种情况

能不能在构造函数中使用return呢?答案是可以的,但是return在使用过程中要知道一些规则 我们通过代码的形式,来了解了解 function TestA(name){this.name namereturn 1 } function TestB(name){this.name namereturn test } function TestC(name){this.name namereturn f…

visionPro链接相机

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

【Golang】Gin 框架的多种类型绑定函数

文章目录 前言一、Gin 框架解释二、代码实现三、总结 前言 在开发 Web 应用时&#xff0c;处理 HTTP 请求和响应是我们经常需要做的事情。在 Go 语言中&#xff0c;我们有许多优秀的 Web 框架可以帮助我们完成这项工作&#xff0c;而 Gin 框架就是其中之一。本文将深入探讨 Gi…

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

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

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

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