Vue + Vite项目,如何让他人访问(小技巧)

前端写好项目,想让其他人简单查看一下效果,在同一局域网下(比如连接同一WiFi)可以让外部通过ip来访问。

修改dev命令

正常情况下script下的dev命令是不会指定host的,我们可以指定为0.0.0.0,允许所有ip访问。
在这里插入图片描述
在这里插入图片描述

修改完后,windows系统需要关闭防火墙(苹果不需要)。重启项目可以看到,在其他电脑或手机访问Network后的地址就可以访问。
在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用 Vue.jsVite 和 Next.js 进行项目开发时,可以按照以下流程进行: 1. 确定项目需求:首先,明确项目的需求和目标,确定所需的功能和设计。 2. 创建项目:使用命令行工具或者 Vue CLI 创建项目。可以使用以下命令创建一个基于 Vue.jsVite项目: ```bash npm init @vitejs/app my-vue-project --template vue ``` 这将创建一个名为 `my-vue-project` 的目录,并在其中初始化一个基本的 Vue.js + Vite 项目。 3. 配置项目:根据项目需求,配置项目的相关设置。可以在项目根目录下的 `vite.config.js` 文件中进行配置,例如设置代理、自定义构建配置等。 4. 开发页面和组件:根据项目需求,使用 Vue.js 的组件化开发方式创建页面和组件。可以在 `src` 目录下创建相应的 Vue 组件。 5. 路由配置:如果需要使用路由功能,可以选择使用 Vue Router 或者 Next.js 的路由功能进行配置。根据项目需求,在路由配置文件中定义页面的路由规则。 6. 数据管理:如果需要进行数据管理,可以选择使用 Vuex 或者其他状态管理库进行配置和管理应用状态。 7. 样式编写:使用 CSS 或者预处理器(如 SCSS、Less)为页面和组件编写样式。可以在组件内部使用 `<style>` 标签或者单独的样式文件进行样式编写。 8. 构建和打包:使用构建工具对项目进行构建和打包。Vite 在开发环境中使用即时编译,而在生产环境中使用 Rollup 打包。 9. 部署项目:根据项目需求,选择合适的部署方式将项目部署到服务器或者云平台上。 以上是一个基本的 Vue.js + Vite + Next.js 项目开发流程,具体的实现和细节可能会根据项目需求而有所不同。在开发过程中,可以参考相关文档和示例代码来更好地理解和使用这些技术栈。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值