vite打包配置

news2024/12/28 4:19:59

目录


在这里插入图片描述
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({
	//生成压缩包gz
	verbose: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.coloradmin.cn/o/1634884.html

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

相关文章

Matlab|含sop的33节点配电网优化

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序以IEEE33节点为例,分析含sop的配电网优化,包括sop有功约束、无功约束和容量约束,非线性部分通过转换为旋转锥约束进行编程,并且包括33节点配电网潮流及对应…

python自动化操作docx

使用Python自动化处理Word文档 在日常工作中,我们经常需要处理大量的Word文档,这时自动化脚本就显得尤为重要。本文将介绍如何使用Python中的python-docx库来创建和修改Word文档。 安装python-docx库 在开始之前,确保你已经安装了python-d…

基于JWT实现的Token认证方案

JSON Web Token是什么? JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案。 JSON Web Token(JWT)是一个开放标准(RFC 7519),它定义了一种紧凑且自包含的方式,用…

电脑文件误删除如何恢复?这5个策略亲测有效!

“求助!在电脑上不小心删除了文件还有机会找回来吗?一不小心我就删除了一个重要的工作文件!大家快帮帮我吧!” 保存在电脑里的文件对电脑用户来说很多都是非常重要的,我们可能生活中、学习上以及工作上都需要使用这些文…

C++学习第七课:控制程序流程的学习和示例详解

C学习第七课:控制程序流程 在C中,控制程序流程是编程逻辑的核心部分,它决定了程序的执行顺序。本课我们将介绍C中的各种控制流程语句,包括条件语句、循环语句以及如何使用它们遍历多维数组和计算斐波那契数列。 控制流程语句 i…

哪个牌子的骨传导耳机好用?盘点五款高热度爆款骨传导耳机推荐!

近年来,骨传导耳机在潮流的推动下销量节节攀升,逐渐成为运动爱好者和音乐迷们的必备装备。但热度增长的同时也带来了一些品质上的忧患,目前市面上的部分产品,存在佩戴不舒适、音质不佳等问题,甚至可能对听力造成潜在损…

VSCode SSH连接远程主机失败,显示Server status check failed - waiting and retrying

vscode ssh连接远程主机突然连接不上了,终端中显示:Server status check failed - waiting and retrying 但是我用Xshell都可以连接成功,所以不是远程主机的问题,问题出在本地vscode; 现象一: 不停地输入…

Python俄罗斯方块

文章目录 游戏实现思路1. 游戏元素的定义2. 游戏区域和状态的定义3. 游戏逻辑的实现4. 游戏界面的绘制5. 游戏事件的处理6. 游戏循环7. 完整实现代码 游戏实现思路 这个游戏的实现思路主要分为以下几个步骤: 1. 游戏元素的定义 Brick类:表示游戏中的砖…

使用Tortoise 创建远程分支

1。首先创建本地分支branch1,右键tortoise git->创建分支,输入分支名称branch1,确定。 2。右键tortoise git->推送,按下图设置,确定,git会判断远程有没有分支branch1,如果没有会自动创建…

QT类之间主窗口子窗口传递*指针对象

1.新建CFile_Operation 类文件 2.主窗口头文件声明: CFile_Operation *cfile_operation; 按钮点击事件函数里面调用子窗口 dialog_debug new Dialog_Debug(this);connect(this,&MainWindow_oq::SendCfile_operation_Obj,dialog_debug,&Dialog_Debug::R…

【redis】初始redis和分布式系统的基本知识

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

Linux中ssh登录协议

目录 一.ssh基础 1.ssh协议介绍 2.ssh协议的优点 3.ssh文件位置 二.ssh原理 1.公钥传输原理(首次连接) 2.ssh加密通讯原理 (1)对称加密 (2)非对称加密 3.远程登录 三.服务端的配置 常用的配置项…

C++信息学奥赛 数据结构认识

数据结构 1.1数据结构分类 1.2基本数据类型 1.3数字编码 1.4字符编码 1.1数据结构分类 数据结构如同一副稳固而多样的框架。为数据的有序组织提供了蓝图,算法得以在此基础上生动起来。 常用的数据结构包括哪些 , , &…

QA测试开发工程师面试题满分问答21: 单元测试、集成测试、系统测试的侧重点是什么?

单元测试、集成测试和系统测试是软件测试中的不同层次和阶段,每个阶段侧重于不同的测试目标和范围。以下是它们的侧重点的简要说明: 单元测试: 单元测试是针对软件中最小的可测试单元(通常是函数、方法或模块)进行的测…

版本控制系统-Git

目录 1. Git简介 2. 下载及安装 3.命令行操做 3.1全局设置 3.2初始化仓库 3.3提交代码 3.4查看提交历史 3.5推送代码 3.6拉取合并代码 3.7克隆仓库 3.8. 配置忽略文件 3.9. 凭据管理 4. GUI工具操作 4.1. 全局设置 4.2. 初始化仓库 4.3. 提交代码 输入提交日志…

Gone框架介绍3 - 使用gone命令,自动生成Priest函数

文章目录 1. 安装辅助工具: gone2. 创建一个名为gen-code的新项目3. 创建Goner4. 使用辅助工具5. 添加main函数 我在两年前实现了一个Golang的依赖注入框架,并且集成了gin、xorm、redis、cron、消息中间件等功能,自己觉得还挺好用的;之前一直…

Jenkins首次Build,配置Git,Maven,JDK,凭证管理

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具,起源于Hudso…

有哪些好用电脑端时间定时软件?桌面日程安排软件推荐 桌面备忘录

随着现代生活节奏的加快,人们对于时间管理和任务提醒的需求越来越大。为了满足这一需求,市场上涌现出了众多桌面便签备忘录软件,它们不仅可以帮助我们记录待办事项,还能定时提醒我们完成任务。在这篇文章中,我将为大家…

宝子们,到我选Offer了

A. 腾讯IEG光子 游戏客户端 Base 深圳 优点: 1. Title可以,是IEG正经游戏工作室 2. 这可是鹅啊,可以吟唱《作废》歌 缺点: 1. 离得远 要租房 2. 5000HC 转正率懂得都懂 3. 可能会参与预研的东西 不会很快参与…

HaLo-NeRF:利用视觉和语言模型对场景的精准定位和细粒度语义理解

包含大量摄影师拍摄的照片的互联网图像集有望实现对大型旅游地标的数字探索。然而,先前的工作主要集中在几何重建和可视化上,忽略了语言在为导航和细粒度理解提供语义界面方面的关键作用。 项目:HaLo-NeRF: Learning Geometry-Guided Semant…