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

  • 增值税的计税依据包括
  • 个人以房产投资企业需要过户吗
  • 红冲以前年度收入成本的账务处理
  • 增值税科目年末结转可以吗
  • 工会经费返还怎么使用
  • 新会计准则施行
  • 企业将资产移送他人的下列情形
  • 小微企业增值税起征点是多少
  • 存在问题的具体表现和产生问题的原因分析
  • 佣金和手续费税前扣除比例
  • 代扣代缴公积金有返还吗
  • 仓库常用包材
  • 预付账款属于什么账户
  • 未安装使用
  • 客户退回发票会退回吗
  • 出口退税未收汇已申报
  • 用实物资产注资给子公司需缴纳增值税吗?
  • 企业如何规避印刷风险
  • 增值税抵扣期限多少天
  • 小规模纳税人开具1%增值税专用发票可以抵扣吗
  • 最新房产税消息2020
  • 增值税票查无此票是什么原因
  • 当期损益包括哪些费用
  • 税控盘年费每年都可以抵扣吗
  • 用企业资本金购物违法吗
  • 上交印花税分录
  • 付企业网银年服费怎么付
  • 如何修复在感情中受的伤害
  • 增值税发票是不是可以抵税
  • 电脑运行慢怎么清理c盘
  • 怎么免费获取流量
  • CENTOS7安装报错
  • 微信小程序实现页面跳转
  • 付款给代账公司的费用是什么科目
  • 品质扣款单
  • 企业发行股票的会计分录
  • 建设项目的设计阶段分为
  • php floor()
  • php处理数组的函数
  • 为庆祝中秋而摆放的东西
  • php日期差
  • 进项税额资产还是负债
  • 应付职工薪酬会产生暂时性差异吗
  • php实现将base64格式图片保存在指定目录的方法
  • 利用php将图片转为文字
  • 农产品核定扣除增值税进项税额计算表
  • 节假日加班工资是几倍
  • springsecurity有什么用
  • 如何在税控盘上申领发票
  • 人工智能自动对焦又叫什么
  • 在业和存续的区别
  • 递延所得税资产和所得税费用的关系
  • 苗圃的账务处理
  • 房产交易缴税
  • 出口不报关账务处理
  • 物业公司代收代付租金要开发票吗
  • 土地回收补偿费怎么算
  • 跨年度冲红字发票怎么冲
  • 上个月开的发票这个月作废如何做帐?
  • 计入福利费
  • 个人无偿赠与不动产税收管理
  • vmware_vmx.exe进程在哪里关
  • win7系统怎么把桌面文件放到d盘
  • win10相机模糊
  • win10周年纪念版
  • Win10 Mobile/PC RS2快速预览版14926同步推送
  • linux系统中安装软件的批处理文件
  • Win10预览版镜像
  • linux yum安装软件命令
  • root什么玩意
  • w7系统序列号怎么查
  • 简单谈谈对中国电信的认识
  • edittext弹出软键盘
  • 跨浏览器跨终端的前端开发
  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
  • 酷狗模拟场景怎么用
  • android获取屏幕大小
  • 被标记为广告推销的电话能接吗
  • 已申报的纳税申报表怎么下载打印
  • 办公电话怎么设置铃声
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设