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

 配置开发服务器（ 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: {
    // 让服务器监听所有地址，包括局域网 IP
    host: 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': '' },
    //   }
    //