vite 使用本地 ip + localhost 访问服务

news2024/11/25 7:17:19

vite 使用本地 ip + localhost 访问服务

  • 在 vite.config.js 中,如果未配置 server.host,默认服务将以 localhost 进行启动,此时我们可以通过 localhost:port 或 127.0.0.1:port 进行应用访问。

    import { resolve } from 'path'
    function pathResolve(dir: string): string {
      return resolve(process.cwd(), '.', dir)
    }
    export default defineConfig({
      resolve: {
        alias: {
          '@': pathResolve('src')
        }
      },
      server: {
        port: 3000,
        open: true
      },
      build: {
        assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项
      }
    })
    

    启动服务后控制台输出:
    在这里插入图片描述

  • 如果配置了 server.host 的值为 0.0.0.0,静态资源服务将以 localhost 和本地 Ip 进行启动,此时我们可以通过 localhost:port 或 127.0.0.1:port 或localIp:port 进行应用访问

    import { resolve } from 'path'
    function pathResolve(dir: string): string {
      return resolve(process.cwd(), '.', dir)
    }
    export default defineConfig({
      resolve: {
        alias: {
          '@': pathResolve('src')
        }
      },
      server: {
        host: '0.0.0.0'
        port: 3000,
        open: true
      },
      build: {
        assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项
      }
    })
    

    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1101533.html

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

相关文章

05、SpringBoot 集成 RocketMQ

目录 SpringBoot集成RocketMQ消息发送三种方式1、同步消息producer-springboot创建项目添加依赖配置文件同步消息发送代码启动类Test类 comsumer-springboot创建项目添加依赖配置文件同步消息消费代码 2、异步消息生产者消费者 3、一次性消息生产者消费者 消息消费两种方式1、集…

使用 OAuth 和 OpenID Connect 进行升级身份验证

实现递增身份验证不需要让应用程序编排对多个复杂 API 的调用。 相反,通过利用开放标准中已有的功能,您可以使用所有应用程序最有可能已经在使用的协议库为所有应用程序构建低摩擦、无状态的递增身份验证。 在本文中,您将了解什么是递增身份…

uniapp checkbox样式失效,选中框选中按钮不显示

找了很多方法 最后网上一个博主找到了解决方法 在项目的main.css里面 如果你不知道你的css样式在哪个文件夹 直接全局搜索‘ 找到注释两个地方 第一个 checkbox::before 找到这一行 注释箭头指的地方就可以 第二个 checkbox .uni-checkbox-input::before, 注释这两个地方…

Leetcode hot 100之动态规划【递推公式】

目录 入门理解 斐波那契(Fibonacci)数列:递归 数塔:递推 递推公式 最小路径和 遍历顺序 整数拆分:拆分为和,乘积最大化 背包:: ->装包 框架 01背包:不可复选 倒序遍历 …

Android 自定义view 圆形进度条

Android 自定义view 圆形进度条 前言一、码前分析二、开码1.画笔2.弧度3.圆弧的位置4.暴露给外部设置进度条的方法三、使用四、完整代码 总结 前言 先来看看效果,大概要实现这么一个圆形的进度条 一、码前分析 要实现这么一个进度条的效果,实际上是要画…

精彩再现!LLUG 深圳场成功举办 | 附活动资料下载

导读:9 月 24 日下午,龙蜥社区联合Linux 中国在深圳成功举办LLUG。本文转自Linux 中国,作者 Bestony。 9 月 24 日下午,龙蜥社区联合Linux 中国举办的 LLUG 在热浪滔天的深圳圆满落幕。 (图/ 白板上的 “LLUG.sz”由 N…

哇喔,用这个平台制作电子画册,太简单了!

经常在朋友圈里看到可以在线浏览、类似仿真书的电子画册,总觉得这种制作起来很难,后来无意间看到朋友在制作,今天终于知道怎么做了! 原来只用一个平台 FLBOOK!!就能做出来这种效果,像我这种电脑…

C/C++类型转换

目录 一、C语言中的类型转换二、C中的类型转换2.1 C的四种类型转换2.1.1 static_cast2.1.2 reinterpret_cast2.1.3 const_cast2.1.4 dynamic_cast 三、RTTI(了解)四、特殊的类型转换 一、C语言中的类型转换 在C语言中,如果赋值运算符左右两侧…

【Unity ShaderGraph】| 如何快速制作一个 马赛克效果 实战

前言 【Unity ShaderGraph】| 如何快速制作一个 马赛克效果 实战一、效果展示二、马赛克效果四、应用实例 前言 本文将使用Unity 的ShaderGraph制作一个马赛克的效果,可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章:【Unity S…

2022最新版-李宏毅机器学习深度学习课程-P25 Spacial Transformer Layer

data augmentation/spacial transformer CNN 并不能够处理影像放大缩小,或者是旋转的问题。所以在做影像辨识的时候,往往都要做 Data Augmentation,把你的训练数据截一小块出来放大缩小、把图片旋转,CNN 才会做到好的结果。 有一个架构叫 spacial Tran…

Ubuntu 22.04.3 LTS单机私有化部署sealos desktop

推荐使用奇数台 Master 节点和若干 Node 节点操作系统 :Ubuntu 22.04 LTS内核版本 :5.4 及以上配置推荐 :CPU 4 核 , 内存 8GB, 存储空间 100GB 以上最小配置 :CPU 2 核 , 内存 4GB, 存储空间 60GB 这里采用的Ubuntu 22.04.3 LTS 版本,Ubuntu 20.04.4 LTS这个版本…

iOS——Manager封装网络请求

在之前的项目里,我们都是把网络请求写在viewController的viewDidLoad,而实际中使用的时候并不能这么简单,对于不同的需要,我们需要有不同的网络请求。所以我们可以用单例模式创建一个全局的Manager类,用实例Manager来执…

微信朋友圈的高级玩法!你一定要知道!

我们都知道,朋友圈是一个社交平台,可以让我们和朋友们分享生活中的点滴,看到他们的动态。但你可能不知道,朋友圈其实有很多高级玩法,可以让你的社交体验更加丰富多彩。今天,就让我们一起来看看朋友圈的那些…

协同办公系统OA实施过程中需要注意的细节

随着企业对于高效、便捷的办公方式的需求增加,协同办公系统OA正逐渐成为企业信息化建设的热门选择。然而,协同办公系统OA的实施并非一蹴而就,需要企业在实施过程中注意一系列的细节。 一、规划与需求分析 企业应根据自身的业务需求和发展战略…

天津滨海新区城市轨道交通电能管理系统方案与实施方案

【摘要】:介绍天津滨海新区轨道交通项目建设电能管理系统的系统架构、功能组成和实施方案。在借鉴其他城市轨道交通项目电能管理系统的基础上,结合天津滨海新区轨道交通建设的具体情况,对系统组网方案、测量表计设置原则、与通风空调节能系统和照明节能系…

20231017定时任务

1. 构建定时任务 表达式生成 在线Cron表达式生成器 1.1 启动类 1.2 测试范例 描述: 1,将该类用Component描述,交给spring管理. 2,定时任务方法用Scheduled+cron表达式描述 2. 定时任务的弊端和优化方案 1.假如有一个定时任务,每小时检查关闭超时未支付订单,当10…

螺纹快速接头在卫浴行业中的应用提高产量降低生产成本

螺纹快速接头在卫浴行业主要用于上下水测试和密封性测试,可以快速密封连接待测产品和水管。取代之前的工人手拧编织管六角螺母的方式,方便快捷,密封性好,产品测试更稳定。 卫浴行业产品必须具备很好的密封性,防止在实际…

GeoServer改造Springboot启动四(解决post接口方法无法用@requestbody为入参的请求)

1、修改源码4 解决问题:解决Controller接口post方法(如图 19)无法用@requestbody为入参的 json数据进行请求,用swagger请求示例如图 20,具体错误呈现如图 21。 图 19Controller接口示例 图 20post接口请求示例 图 21post接

CEC2013(MATLAB):​白鲸优化算法(Beluga whale optimization,BWO)​求解CEC2013

一、白鲸优化算法(Beluga whale optimization,BWO) 白鲸优化算法(Beluga whale optimization,BWO)由Changting Zhong等人于2022年提出,该算法模拟了白鲸游泳,觅食和“鲸鱼坠落”行为…

Qt绘图 day9

Qt绘图 day9 基本绘图流程 Qt的绘制系统支持在屏幕和打印设备上使用相同的API进行绘制,主要基于QPainter、QPaintDevice和QPaintEngine类。 QPainter:用于执行绘图操作QPaintDevice:用于二维空间的抽象QPainEngine:提供绘图器在不…