位置: 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相关代码演示)(基于骨骼关键点的动作识别)

  • 银行卡冲正的钱什么时候到账(银行卡冲手机费)(银行卡冲正钱什么时候能打回账户)

    银行卡冲正的钱什么时候到账(银行卡冲手机费)(银行卡冲正钱什么时候能打回账户)

  • 小爱音箱换了个手机怎么设置(小爱音箱换了个网络怎么设置)

    小爱音箱换了个手机怎么设置(小爱音箱换了个网络怎么设置)

  • 小米手机射频耗电怎么调整(小米手机射频耗电解决办法)

    小米手机射频耗电怎么调整(小米手机射频耗电解决办法)

  • 微信朋友圈广告评论是自动评论的吗(微信朋友圈广告怎么关闭不了)

    微信朋友圈广告评论是自动评论的吗(微信朋友圈广告怎么关闭不了)

  • 电脑安全模式怎么进入(电脑安全模式怎么连接网络)

    电脑安全模式怎么进入(电脑安全模式怎么连接网络)

  • 苹果xs充电到百分之80卡住了(苹果xs充电到80%就不充了为什么)

    苹果xs充电到百分之80卡住了(苹果xs充电到80%就不充了为什么)

  • 佳能800d和80d区别(佳能800d和佳能80d单反哪个好)

    佳能800d和80d区别(佳能800d和佳能80d单反哪个好)

  • 华为相册拼图在哪(华为相册拼图怎么拼图)

    华为相册拼图在哪(华为相册拼图怎么拼图)

  • ios备忘录橡皮怎么调节(苹果备忘录橡皮)

    ios备忘录橡皮怎么调节(苹果备忘录橡皮)

  • 9700kf配什么主板(9700kf配什么主板最好)

    9700kf配什么主板(9700kf配什么主板最好)

  • 拨号码时显示虚拟运营商什么意思(手机号码拨出去怎么显示虚拟号码)

    拨号码时显示虚拟运营商什么意思(手机号码拨出去怎么显示虚拟号码)

  • 芒果tv签到21天为什么没有会员(芒果tv签到21天领不了会员)

    芒果tv签到21天为什么没有会员(芒果tv签到21天领不了会员)

  • 为什么小爱音响一卡一卡的(为什么小爱音响灯一直亮着)

    为什么小爱音响一卡一卡的(为什么小爱音响灯一直亮着)

  • 手机是不是越更新越卡(手机是不是越更新越不好)

    手机是不是越更新越卡(手机是不是越更新越不好)

  • 微信第二次封什么时候可以自动解除?(微信第二次封号封永久怎么办)

    微信第二次封什么时候可以自动解除?(微信第二次封号封永久怎么办)

  • 手机存储权限什么意思(手机存储权限什么开启)

    手机存储权限什么意思(手机存储权限什么开启)

  • 苹果11网络不好是怎么回事(苹果11网络不好怎么回事但信号是满的)

    苹果11网络不好是怎么回事(苹果11网络不好怎么回事但信号是满的)

  • 怎么看手机支不支持tws(怎么看手机支不支持快充)

    怎么看手机支不支持tws(怎么看手机支不支持快充)

  • vivos5有没有双扬声器(vivos5是不是双卡)

    vivos5有没有双扬声器(vivos5是不是双卡)

  • 陌陌一直显示在线说明在聊天吗(陌陌一直显示在群围观是在线吗)

    陌陌一直显示在线说明在聊天吗(陌陌一直显示在群围观是在线吗)

  • 如何发送朋友验证请求(如何发送朋友验证请求是对方加我)

    如何发送朋友验证请求(如何发送朋友验证请求是对方加我)

  • 苹果键盘大写按哪个键(苹果键盘大写按键)

    苹果键盘大写按哪个键(苹果键盘大写按键)

  • 手机送话器为什么会坏(手机送话器为什么没声音)

    手机送话器为什么会坏(手机送话器为什么没声音)

  • 金立s9怎么刷机(金立s9刷机包官方)

    金立s9怎么刷机(金立s9刷机包官方)

  • 全民k歌修音功能在哪(全民k歌怎样开启修音模式)

    全民k歌修音功能在哪(全民k歌怎样开启修音模式)

  • 人像模式是什么意思(人像模式是什么字母)

    人像模式是什么意思(人像模式是什么字母)

  • 苹果电脑Mac设备如何让内置扬声器和外接音响同时发出声音(苹果电脑mac设备在哪里)

    苹果电脑Mac设备如何让内置扬声器和外接音响同时发出声音(苹果电脑mac设备在哪里)

  • 微软 Win11 全新画图应用已向 Dev 渠道用户推送(微软 windows11)

    微软 Win11 全新画图应用已向 Dev 渠道用户推送(微软 windows11)

  • 叮咚,您有一封告白信件待查收(原生HTML+CSS+JS绘制表白信件,代码+链接+步骤详解)(叮咚你有一份好运请查收图片)

    叮咚,您有一封告白信件待查收(原生HTML+CSS+JS绘制表白信件,代码+链接+步骤详解)(叮咚你有一份好运请查收图片)

  • 如何查询企业税务状态
  • 供电车间工人薪酬计入什么科目
  • 租厂房需要交租赁税吗
  • 预计销售收入增长是什么意思
  • 收入支出结余公式原理
  • 其他应付款长期挂账如何处理
  • 支票存根必须盖银行章吗
  • 贴息为什么要付利息呢
  • 报税软件费用可以退吗
  • 企业所得税营业税金及附加包括
  • 土地增值税预缴政策
  • 公司试驾车购置税怎么交
  • 电子承兑汇票没开通能接受吗
  • 购买电脑配件的网址
  • 企业公车私用如何处理
  • 企业相互之间借款合法吗
  • 个人是否可以开展募捐
  • 企业怎样信用升级
  • 上年工资计提多了才发现
  • 国际货运运费的计算基础
  • windows10如何卸载edge
  • 企业收到政府补助时,无需开发票,双方根据银行电汇单
  • 完成交易预付账怎么做账
  • 什么是资产减值准备计提
  • eml文件怎么打开方式
  • win11开机后无法操作
  • 代收代付的垃圾清运费没发票能入账吗
  • 公司承担的社保公积金怎么做账
  • 微信php开发教程
  • 购销合同印花税税率表
  • 增值税实际税负计算公式
  • 来料加工业务的会计处理
  • laravel入门与实战
  • 中小企业成本核算方法
  • 采购周转材料会计分录怎么写
  • 企业所得税核定征收方法有哪两种
  • 股权转让实操
  • vue set up
  • win11任务管理器卡死没响应
  • php获取服务端ip
  • man-s命令
  • 卖出周转材料的分录怎么做
  • 建筑业总包增值税
  • 债转股需要哪些资料
  • 26个字母!
  • 代扣代缴增值税附加税减免政策
  • 期初库存和期末库存可以修改吗
  • 费用性税金包括增值税吗
  • 跨年增值税专用发票红字发票怎么开
  • 非税收入票据能报税吗
  • 营改增后房租发票可以抵扣吗
  • 什么费用可以列入研发费用
  • 税审报告一定要税所主任签吗
  • 物业管理企业应按职工工资总额的1.5%计提工会经费
  • mysql Access denied for user ‘root’@’localhost’ (using password: YES)解决方法
  • sql server的mdf文件怎么导入数据库
  • Win7旗舰版系统文件名称
  • linux重启shell
  • win10 20h2 微软账户
  • cocos2djs教程
  • 教你如何在家自己测瞳距
  • python生成随机
  • 非递归快速排序python
  • 单例 python
  • unity3d基础操作
  • js实现新浪博客推送
  • javascript入门基础
  • js中unbind
  • javascript中var的作用
  • html中meta
  • 每天一篇日记100字
  • 简单谈谈你对中国国防建设的认识
  • android怎么学
  • js如何保留一位小数
  • 湖南国家税务局网上电子税务局官网
  • 成都所见所得科技有限公司是什么平台
  • 经济补偿金如何计税
  • 宜昌市西陵区国税局局长
  • 软件企业专项审计
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设