位置: IT常识 - 正文

vite基础使用及相关配置(vit详解)

编辑:rootadmin
vite基础使用及相关配置

推荐整理分享vite基础使用及相关配置(vit详解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vitek,vitejte,vite cli,vite cli,vitrate,vitrate,vitec,vite从入门到精通,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

这篇文章主要是记录前段时间公司里以vite构建的一个小项目(前端界面不多,主要功能及相关配置是在后端),挺简单的几个小页面。 说到vite,之前虽然都有学习了解及demo尝试,但因为业务等其他各方面因素也一直没有一个正式的,借这次机会特别记录下。

Vite介绍vite基础使用及相关配置(vit详解)

不说废话,去官网看看

配置环境变量

根目录下创建env文件夹(也可以不创建env文件夹,直接在根目录下创建对应的环境变量文件)

分别创建自己需要的环境文件及对应的配置

// 类似于这种方式进行配置NODE_ENV="develop"VITE_APP_BASEAPI="https://www.dev.com"vite.config.ts文件中进行配置// 用于加载 .env 文件的目录。可以是一个绝对路径,也可以是相对于项目根的路径。envDir: 'env',重启项目可以在项目中通过 import.meta.env打印当前的环境等变量相关信息console.log('import.meta.env::', import.meta.env)参考官方文档及对应vite envDir 配置信息配置host及port在vite.config.ts文件下server中进行配置,请参照配置代理在package.json中的scripts中进行配置 "scripts": { "start": "vite --open --host=localhost --port=4000 --mode develop", },配置代理// 配置反向代理server: {host: 'localhost', // 启动后浏览器窗口输入地址就可以进行访问port: 4500, // 端口号open: true, //是否自动打开浏览器cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源https: false, //是否支持http2 如果配置成true 会打开https://localhost:3001/xxx;strictPort: true, //是否是严格的端口号,如果true,端口号被占用的情况下,vite会退出hmr: true, // 开启热更新proxy: {'/api': {// 配置接口调用目标地址target: 'https://www.xxxx.com/xxxx',// 当进行代理时,Host 的源默认会保留(即Host是浏览器发过来的host),如果将changeOrigin设置为true,则host会变成target的值。changeOrigin: true,// 前缀 /api 是否被替换为特定目标,不过大多数后端给到的接口都是以/api打头,这个没有完全固定的答案,根据自己的业务需求进行调整rewrite: path => path.replace(/^\/api/, ''),}}},配置别名resolve: {// 配置别名alias: {'@': resolve(__dirname, 'src'),"@c": resolve(__dirname, "src/components"),},// 导入时想要省略的扩展名列表extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],},vite.config.js中引入path报错

解决方法:

npm install @types/node --save-dev# 或者yarn add @types/node配置第三方插件

如果项目要使用第三方插件,需要在 external 里面进行配置:

配置Lessyarn add less配置预览//预览设置 npm run build 打包之后,会生成dist文件 然后运行npm run preview;vite会创建一个服务器来运行打包之后的文件preview: {host: 'localhost',port: 4200,//端口号open: true,//是否自动打开浏览器cors: true, // 配置 CORSproxy: { // 配置自定义代理规则'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}},},配置打包// 打包配置 npm run buildbuild: {// 最终构建的浏览器兼容目标,类型:string | string[]target: '',//指定输出路径outDir: "dist",//生成静态资源的存放路径assetsDir: "assets",//小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项assetsInlineLimit: 4096,//启用/禁用 CSS 代码拆分,如果指定了 build.lib,build.cssCodeSplit 会默认为 falsecssCodeSplit: true,/*构建后是否生成 source map 文件, boolean | 'inline' | 'hidden'默认:falsetrue: 创建一个独立的 source map 文件inline: source map 将作为一个 data URI 附加在输出文件中hidden: 的工作原理与 'true' 相似,只是 bundle 文件中相应的注释将不被保留*/sourcemap: false,//自定义底层的 Rollup 打包配置rollupOptions: {// 可以配置多个,表示多入口input: {index: resolve(__dirname, "index.html")},output: {chunkFileNames: 'static/js/[name]-[hash].js',entryFileNames: "static/js/[name]-[hash].js",assetFileNames: "static/[ext]/name-[hash].[ext]"}},//默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录。emptyOutDir: true,//chunk 大小警告的限制chunkSizeWarningLimit: 500}使用感受项目启动时间:vite比webpack快(此处指小项目,大项目还没机会尝试)浏览器白屏等待时间:vite比webpack长热更新:vite比webpack快vite不需要过多额外配置,因为已经集成,webpack需要自己去配置打包:vite比webpack快,打包后的体积小一丢丢(因项目本身就不大,相差也不是很大)打包后可以运行命令即可查看打包后的项目
本文链接地址:https://www.jiuchutong.com/zhishi/295165.html 转载请保留说明!

上一篇:基于Python实现五大常用分类算法(原理+代码)

下一篇:基于骨骼关键点的动作识别(OpenMMlab学习笔记,附PYSKL相关代码演示)(基于骨骼关键点的动作识别)

  • 建行流水手机银行可以导出吗(建行流水手机银行解压密码怎么找)

    建行流水手机银行可以导出吗(建行流水手机银行解压密码怎么找)

  • windows11任务管理器怎么打开(windows11任务管理器快捷键)

    windows11任务管理器怎么打开(windows11任务管理器快捷键)

  • 电脑微信可以不用手机验证吗(电脑微信可以不跟手机同步吗)

    电脑微信可以不用手机验证吗(电脑微信可以不跟手机同步吗)

  • 滴滴注销了怎么恢复(滴滴注销了怎么登陆)

    滴滴注销了怎么恢复(滴滴注销了怎么登陆)

  • office副本尚未激活是什么意思(office副本尚未激活会影响使用吗)

    office副本尚未激活是什么意思(office副本尚未激活会影响使用吗)

  • 腾讯会议不能屏幕共享(腾讯会议不能屏幕共享爱奇艺)

    腾讯会议不能屏幕共享(腾讯会议不能屏幕共享爱奇艺)

  • qq邮箱定时发送的邮件,可以被看出来吗(qq邮箱定时发送没有网可以发送吗)

    qq邮箱定时发送的邮件,可以被看出来吗(qq邮箱定时发送没有网可以发送吗)

  • 苹果能修改微信号吗(苹果能修改微信密码吗)

    苹果能修改微信号吗(苹果能修改微信密码吗)

  • 电脑内网连接不上(电脑内网连接不上去)

    电脑内网连接不上(电脑内网连接不上去)

  • 页眉线条怎么删除(页眉线条删除)

    页眉线条怎么删除(页眉线条删除)

  • 天猫精灵解除绑定后是不是不能使用了(天猫精灵解除绑定后怎么重新绑定)

    天猫精灵解除绑定后是不是不能使用了(天猫精灵解除绑定后怎么重新绑定)

  • 快手关注人数显示不对(快手关注人数变少了)

    快手关注人数显示不对(快手关注人数变少了)

  • b-e1是什么手机电池(bcg-e2816a是什么手机)

    b-e1是什么手机电池(bcg-e2816a是什么手机)

  • 程序设计语言处理系统是应用软件吗(程序设计语言处理程序有哪些?它们的作用是什么?)

    程序设计语言处理系统是应用软件吗(程序设计语言处理程序有哪些?它们的作用是什么?)

  • 华为手机主题怎么设置自己喜欢的照片(华为手机主题怎么设置自己的照片)

    华为手机主题怎么设置自己喜欢的照片(华为手机主题怎么设置自己的照片)

  • 剪映怎么添加字幕(剪映怎么添加字幕和配音)

    剪映怎么添加字幕(剪映怎么添加字幕和配音)

  • 怎么弄两个微信软件(怎么弄两个微信分身)

    怎么弄两个微信软件(怎么弄两个微信分身)

  • 手机上的联系人怎么复制到卡上(怎么把联系人导入另一个手机)

    手机上的联系人怎么复制到卡上(怎么把联系人导入另一个手机)

  • qq如何免费送礼物(qq如何免费送礼物给好友)

    qq如何免费送礼物(qq如何免费送礼物给好友)

  • 快手直播连麦视频教程(快手直播连麦视频)

    快手直播连麦视频教程(快手直播连麦视频)

  • 内存卡是sd卡吗(sd储存卡)

    内存卡是sd卡吗(sd储存卡)

  • vivox27怎么自定义铃声(vivox27怎么自定义图标改成自己想换的)

    vivox27怎么自定义铃声(vivox27怎么自定义图标改成自己想换的)

  • 小威智能机器人怎么联网(小威智能机器人怎么使用)

    小威智能机器人怎么联网(小威智能机器人怎么使用)

  • 如何修改网页源代码(如何修改网页源代码生效)

    如何修改网页源代码(如何修改网页源代码生效)

  • Redmi K20 Pro的GPU是那种

    Redmi K20 Pro的GPU是那种

  • 耳机l是左耳还是右耳(耳机l是左耳朵还是右耳朵)

    耳机l是左耳还是右耳(耳机l是左耳朵还是右耳朵)

  • 华为p系列如何截屏(华为P系列如何调整字体大小)

    华为p系列如何截屏(华为P系列如何调整字体大小)

  • 如何在IDEA中创建Web项目(如何在idea中创建xml)

    如何在IDEA中创建Web项目(如何在idea中创建xml)

  • phpcms会员登录失败(phpcms v9用户手册)

    phpcms会员登录失败(phpcms v9用户手册)

  • 个税里的本期收入扣不扣个人社保
  • 交车辆购置税会计账务处理
  • 车船使用税会打折么
  • 商业承兑汇票未到期贴现
  • 项目固定资产投资包括
  • 分公司企业所得税政策
  • 环评费用怎么入账
  • 怎么增加资产减少负债
  • 如何做好服务 服务行业
  • 中国电子口岸证书错误
  • 上一会计年度什么意思
  • 固定资产投资会计处理
  • 债务重组损失是费用吗
  • 购入生产产品用的机器设备一台
  • 对外投资借款费用计入
  • 旅游业差额开票的票据可以累计一季度吗
  • 代收水电气费加盟
  • 营改增后服务业账务处理
  • 以前年度已交增值税额
  • 重复缴税怎么做账
  • 应收账款平均余额公式
  • 营业执照首次年报
  • 普通发票开票步骤
  • 如何查询企业开票记录
  • 金税四期进展
  • 新个税过了申报期怎么办
  • 购买国债利息收入计入利润总额吗
  • 买入返售金融资产是资产还是负债
  • 办理环评费用
  • 个人所得税的税收标准
  • 客户扣了一部分不合格产品的货款,请问如何做账呢?
  • 公司控股的公司下子公司有哪些
  • 公司股权转让流程是先工商还是税务
  • 出售无形资产是什么科目
  • 网速保护功能介绍
  • 管理软件对相机的要求
  • linux 文件夹压缩
  • 纳税人解除劳动合同补偿
  • 发票抵扣条件
  • 打开苹果safari浏览器
  • linux服务有哪些
  • 马勒舞曲
  • PHP 中TP5 Request 请求对象的实例详解
  • 建筑业预缴增值税
  • 企业非流动资产占比多说明什么
  • 【BEV】TPVFormer复现以及原理
  • 专票地址错了要作废吗
  • 金税盘怎么设置字体
  • 公对公二手车交易税
  • vue this.$ref
  • 实例理解SQL中truncate和delete的区别
  • 保洁公司的税率是多少
  • 什么企业不用交残保金
  • 履约保证金打到个人账户合法吗
  • 原材料不良赔偿率怎么算
  • 发票已经报送怎么处理
  • 招待费发票可以开专票吗
  • 收到的进项发票在哪里认证
  • 电子承兑汇票到期怎么兑现
  • 应收账款的账期是什么意思
  • 企业不如实申报个税的风险
  • 增值税代扣代缴范围
  • 流动资产周转次数计算公式
  • 分配间接成本的计算公式
  • 设置密码保护的pdf怎么转word
  • mysql数据库基本知识点总结
  • win8怎么升级到win7
  • 深度技术win10怎么样
  • win7如何开启飞行模式
  • win10系统锁屏广告怎么取消
  • opengl纹理采样
  • nodejs连接达梦数据库
  • c++服务器与客户端连接
  • js实现简单的画图功能
  • dos批命令
  • android recyclerview 拖拽加阴影
  • 在javascript中逻辑运算符包括
  • 增值税有哪些税种组成
  • 小规模纳税人可以用专票抵扣税吗
  • 代账好做吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设