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

  • 微信怎么改备注(电话手表微信怎么改备注)

    微信怎么改备注(电话手表微信怎么改备注)

  • apple care是什么(applecare是什么服务有用吗)

    apple care是什么(applecare是什么服务有用吗)

  • word同时显示两个页面怎么弄

    word同时显示两个页面怎么弄

  • 电话手表有微信功能吗(小天才电话手表有微信吗)

    电话手表有微信功能吗(小天才电话手表有微信吗)

  • md788ch/a是ipad几代(md788cha是ipad几代可以升级)

    md788ch/a是ipad几代(md788cha是ipad几代可以升级)

  • 取消用户账户控制有什么影响(取消用户账户控制)

    取消用户账户控制有什么影响(取消用户账户控制)

  • 微信红包退回对方有提示吗(微信红包退回对方,怎么看金额)

    微信红包退回对方有提示吗(微信红包退回对方,怎么看金额)

  • 淘宝电子凭证怎么确认收货(淘宝电子凭证怎么开通)

    淘宝电子凭证怎么确认收货(淘宝电子凭证怎么开通)

  • 为什么快手没有消息也会有红点(为什么快手没有创作者中心)

    为什么快手没有消息也会有红点(为什么快手没有创作者中心)

  • 安卓系统7.0手机有哪些(安卓系统7.0手机推荐)

    安卓系统7.0手机有哪些(安卓系统7.0手机推荐)

  • 手机充电头咋用(手机充电头接法图解)

    手机充电头咋用(手机充电头接法图解)

  • 手机怎么交座机话费(怎么在手机上给座机交话费)

    手机怎么交座机话费(怎么在手机上给座机交话费)

  • 滴滴快车怎么往返收费(滴滴快车怎么转出租车)

    滴滴快车怎么往返收费(滴滴快车怎么转出租车)

  • 视频可以p吗(视频可以p图或修图吗)

    视频可以p吗(视频可以p图或修图吗)

  • switch开箱含哪些配件(switch开箱配件怎么用)

    switch开箱含哪些配件(switch开箱配件怎么用)

  • 小米8的处理器是什么(小米8的处理器是多少)

    小米8的处理器是什么(小米8的处理器是多少)

  • 快手作品违规多久恢复(快手作品违规多少次容易封号)

    快手作品违规多久恢复(快手作品违规多少次容易封号)

  • 手机插上外置u盘没反应(手机插上外置u盘只显示充电)

    手机插上外置u盘没反应(手机插上外置u盘只显示充电)

  • 为什么微信电话连接失败(为什么微信电话会自己中断)

    为什么微信电话连接失败(为什么微信电话会自己中断)

  • 手机更换屏幕(手机更换屏幕会不会丢失数据)

    手机更换屏幕(手机更换屏幕会不会丢失数据)

  • Linux系统请求:系统救命稻草(linux系统情况)

    Linux系统请求:系统救命稻草(linux系统情况)

  • 最高频率的内存是什么(最高频率内存条是多少)

    最高频率的内存是什么(最高频率内存条是多少)

  • JAVAFile类以及怎么在目录不存在的情况下创建文件(javafiles)

    JAVAFile类以及怎么在目录不存在的情况下创建文件(javafiles)

  • 后端中dto、vo、entity的区别(后端中spef文件和spf文件)

    后端中dto、vo、entity的区别(后端中spef文件和spf文件)

  • python sorted()函数的参数用法(pythonsorted函数的作用)

    python sorted()函数的参数用法(pythonsorted函数的作用)

  • dedecms后台功能之支付接口设置介绍(dedecms使用教程)

    dedecms后台功能之支付接口设置介绍(dedecms使用教程)

  • 减半征收的印花税缴纳所得税吗
  • 资产负债表要素包括几项
  • 技术转让费为什么那么贵
  • 公司注销时应付职工薪酬怎么处理
  • 库存现金多了是什么原因
  • 股权转让是把公司卖了吗
  • 企业收取多年租金怎么算
  • 通用机打发票现在还有吗
  • 园林绿化公司要交税吗
  • 建设工程农民工工资支付条例
  • 勾选认证的发票在哪里能查询
  • 享受小微企业所得税优惠条件2022
  • 讲师费发票开票科目
  • 一般户收到基本户转账的会计分录
  • 农产品增值税核定扣除办法
  • 企业微信收入也要交税吗
  • 会议展览服务费需要交印花税吗
  • 营改增后城建税和教育费附加包含在哪里
  • win10怎么看电脑名称
  • steam打开速度
  • 收回借支款的账务处理
  • 空头支票怎么办
  • 公司产生的劳务费如何计算个人所得税
  • 申报高新企业的当年一定要研发费用加计扣除吗
  • PHP:mb_substr_count()的用法_mbstring函数
  • 如何解决win7系统卡顿
  • 专用发票增量申请流程
  • Win11错误提示"the pc must support secure boot"怎么解决
  • 银河麒麟操作系统价格
  • 递延所得税资产是什么意思
  • 金融资产包括哪三大类及会计科目
  • 股息红利要交税吗
  • 公司员工生病看望的红包能入公司账吗
  • 上年度成本费用包括哪些
  • 跨国公司外汇资金集中
  • 企业员工的工资设定标准
  • framework怎么用
  • 权益的定义特征
  • yii2 页面底部加载css和js的技巧
  • windows nginx php配置
  • 金税盘减免税款留抵
  • iframe标签表示的框架
  • thinkphp3.0
  • 如何确定可以结婚生子
  • 接待客户的住宿费计入什么科目
  • 增值税调整怎么结算
  • 收据的种类有哪些
  • 来料加工分录
  • odbc api
  • mongotemplate 分页查询
  • 海关进口增值税专用缴款书
  • 跌价准备如何入库
  • 未完工属于什么科目
  • 公司借款私人账户
  • 交易性金融资产入账价值怎么计算
  • 长期借款短期利息怎么算
  • 汽车以租代购可靠吗
  • 没有收到款项签认债有用吗
  • 工资扣税是减去五险一金吗
  • 小规模纳税人租赁费税率
  • 集资建房有维修基金吗
  • mysql索引基础
  • mac电脑双系统
  • 电脑windows8怎么样
  • mac自带计算器
  • linux系统如何安装应用
  • jquery 使用
  • JavaScript中的方法名不区分大小写
  • CSS List Grid Layout 图片垂直居中
  • 淘宝python基础教程
  • python 聚类算法包
  • jquery动画让div旋转
  • 夯实基础怎么读
  • javascript编程语言
  • javascript 对象
  • 江西省税务局查不到缴费记录
  • 更改税务购票员
  • 宁波税务局网上办税服务厅
  • 360浏览器hi真不巧
  • 外汇申报填写什么最简单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设