第一步:找到vite.config.js文件,进行部分修改

初始化长这样:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

 我们需要修改成这样:

添加server对象,host为IP,port为端口,open为是否自启动 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //修改启动的
  server: {
    host: '0.0.0.0', // 这个用于启动
    port: '8092', // 指定启动端口
    open: true //启动后是否自动打开浏览器
  }
})

第二步:找到package.json文件,进行部分修改

我们找到scripts对象,这里是配置我们启动环境参数的,默认长这样

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

然后我们修改成这样

  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  },

第三步:修改完,我们测试一下哦

修改前:

修改后:

第四步:本文相关知识解析回顾

"dev": "vite"

在这种情况下,Vite 将以默认配置启动开发服务器,并使用默认的主机地址(通常为 localhost)。这意味着您的应用程序将只能在您本地主机上访问,而不会对外部网络可见。

"dev": "vite --host 0.0.0.0"

vite 是 Vite 构建工具的命令,--host 0.0.0.0 参数告诉 Vite 在启动开发服务器时使用特定的主机地址。在这种情况下,0.0.0.0 表示服务器将监听所有可用的网络接口,而不仅仅是默认的 localhost这样做可以使您的应用程序对局域网中的其他设备可见,以便于跨设备进行测试和共享。

注意:

Network 地址显示的是您的局域网地址,用于在局域网内进行测试和共享。如果您需要让您的应用程序可以从公网访问,您需要确保网络配置和防火墙设置允许公网访问,并且可能需要使用端口转发等技术来将请求转发到您的本地主机上。

Vite v5.2.7 ready in 286 ms:这表示您正在使用 Vite 构建工具的版本号,并且 Vite 已经准备就绪,在 286 毫秒内启动完成。

Local: http://localhost:8092/ :表示可以在本地主机上访问的地址,通过这个地址可以在本地浏览器中打开您的应用程序 

Network: http://192.268.20.109:8092/ : 表示在局域网中其他设备可以访问的地址,在您的局域网中,其他设备可以通过这个地址来访问您的应用程序。这个地址通常被用于在局域网中测试您的应用程序,而不是发布在公网上。 

其他好文推荐(适合刚学习的小白):

使用vite创建vue3项目 + 配置路由 + 配置pinia-CSDN博客

【前端】- 在使用Element UI 的el-tree组件时,从底层去研究如何去实现一键展开/关闭【tree节点】的功能-CSDN博客

(入门级)开发第一个Java程序,只需要跟着做一遍就能理解Java程序运行的原理了-CSDN博客

WebApi发布到IIS服务器的流程-详细解析-百分之百成功_webapi服务器-CSDN博客

温馨提示:

        以上内容仅为本人经验分享,如有问题或者错误,还请及时留言进行更正,避免其他兄弟走弯路。

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐