【功能：vue3 + vite 修改默认启动端口】 - 以及相关配置详细解答，刚学习的小伙伴强烈推荐

第一步：找到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博客

温馨提示：

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