Vite内网ip访问,两种配置方式和修改端口号教程

发布于:2025-02-11 ⋅ 阅读:(41) ⋅ 点赞:(0)

目录

问题

两种解决方式

结果

总结

preview.host¶

preview.port¶


问题

使用vite运行项目的时候,控制台会只出现127.0.0.1(localhost)本地地址访问项目。不可以通过公司内网ip访问,其他团队成员无法访问,这是因为没有将服务暴露在局域网中:

Vite内网ip访问,两种配置方式和修改端口号教程

 

两种解决方式

方式一:修改vite的配置文件(vite.config.ts)
添加 host: “0.0.0.0”

 

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    },
  },
  server: {
    port: 9999,
    host: "0.0.0.0"
  },
});

方式二:修改package.json文件

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

结果

采用上面任一方式,就可以通过内网地址访问了:

Vite内网ip访问,两种配置方式和修改端口号教程

两种方式可以修改端口号
vite.config.js文件中修改

export default defineConfig({
  server: {
    port: 3000
  },
});

或修改package.json文件中

  "scripts": {
    "dev": "vite --port 3000",
    "build": "vite build",
    "preview": "vite preview"
  }

总结

preview.host

为开发服务器指定 ip 地址。 设置为 0.0.0.0 或 true 会监听所有地址,包括局域网和公共地址。

还可以通过 CLI 进行设置,使用 --host 0.0.0.0 或 --host

注意

在某些情况下,可能响应的是其他服务器而不是 Vite。 查看 server.host 了解更多细节。

preview.port
  • 类型: number
  • 默认: 4173

指定开发服务器端口。注意,如果设置的端口已被使用,Vite 将自动尝试下一个可用端口,所以这可能不是最终监听的服务器端口。

示例:

export default defineConfig({
  server: {
    port: 3030
  },
  preview: {
    port: 8080
  }
})

网站公告

今日签到

点亮在社区的每一天
去签到