当前位置：首页 > java >正文

4.9 配置开发服务器和请求代理

java 2025/8/19 6:46:14

配置开发服务器（ Vite / Vue CLI）能够被同一网络中的其他设备访问

要让运行在你本地的 Vue 3 开发服务器（无论是 Vite 还是 Vue CLI）能够被同一网络中的其他设备（如手机、平板、其他电脑）访问，你需要修改开发服务器的配置，使其监听所有网络接口（0.0.0.0），而不仅仅是 localhost（127.0.0.1）。

以下是针对不同构建工具的详细设置方法：

一、使用 Vite

1. 修改 `vite.config.js`

在 vite.config.js 文件中，配置 server.host 为 true 或 '0.0.0.0'。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {// 让服务器监听所有地址，包括局域网 IPhost: true, // 或者写成 host: '0.0.0.0'// 可选：指定端口（默认通常是 5173）port: 5173,// 可选：启动时自动打开浏览器（在本机）open: true,// ⚠️ 注意：通常不需要配置 proxy 来实现远程访问// proxy: {//   '/api': {//     target: 'http://localhost:3000',//     changeOrigin: true,//     rewrite: (path) => path.replace(/^\/api/, ''),//   }// }}
})

2. 启动项目

npm run dev

3. 查看启动信息

启动后，Vite 会显示类似以下的信息：

  VITE v4.4.9  ready in 324 ms➜  Local:   http://localhost:5173/➜  Network: http://192.168.1.100:5173/  # 这就是你的局域网访问地址！➜  press h to show help

Network: 后面的地址就是你的设备在局域网中的 IP 地址，其他设备可以通过这个地址访问你的 Vue 应用。

二、使用 Vue CLI

1. 修改 `vue.config.js`

在 vue.config.js 文件中，配置 devServer.host 为 '0.0.0.0'。

// vue.config.js
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,devServer: {// 监听所有网络接口host: '0.0.0.0',// 可选：指定端口（默认通常是 8080）port: 8080,// 可选：启动时自动打开浏览器open: true,// 可选：关闭主机检查（通常不需要，但有时需要）// disableHostCheck: true, // ⚠️ Vue CLI 4.5+ 已弃用，不推荐// ⚠️ 注意：通常不需要配置 proxy 来实现远程访问// proxy: {//   '/api': {//     target: 'http://localhost:3000',//     changeOrigin: true,//     pathRewrite: { '^/api': '' },//   }//

查看全文

http://www.xdnf.cn/news/18111.html