目录

问题

两种解决方式

结果

总结

preview.host¶

preview.port¶

---

问题

使用vite运行项目的时候，控制台会只出现127.0.0.1（localhost）本地地址访问项目。不可以通过公司内网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.config.js文件中修改

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

或修改package.json文件中

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

总结

preview.host¶

• 类型： string | boolean
• 默认： server.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
  }
})