博客站

在 Vite 中，开发服务器的配置通过 vite.config.js（或 vite.config.ts）文件中的 server 选项进行。以下是一些常用的开发服务器配置选项及其说明：

1. port

• 类型：number
• 说明：指定开发服务器的端口号。
• 默认值：5173
• 示例：

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

2. open

• 类型：boolean | string
• 说明：是否在启动开发服务器时自动打开浏览器。可以指定浏览器名称或路径。
• 默认值：false
• 示例：

  export default defineConfig({
    server: {
      open: true,
      // open: '/Applications/Google Chrome.app', // 指定浏览器
    },
  });
  

3. proxy

• 类型：object
• 说明：配置代理服务器，用于解决跨域问题。
• 示例：

  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:5000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, ''),
        },
      },
    },
  });
  

4. host

• 类型：string | boolean
• 说明：指定开发服务器的主机名。设置为 true 时，会监听所有网络接口。
• 默认值：'localhost'
• 示例：

  export default defineConfig({
    server: {
      host: '0.0.0.0', // 监听所有网络接口
    },
  });
  

5. https

• 类型：boolean | object
• 说明：启用 HTTPS。可以提供一个对象来指定证书和密钥。
• 默认值：false
• 示例：

  export default defineConfig({
    server: {
      https: true,
      // https: {
      //   key: fs.readFileSync('path/to/key.pem'),
      //   cert: fs.readFileSync('path/to/cert.pem'),
      // },
    },
  });
  

6. cors

• 类型：boolean | CorsOptions
• 说明：配置 CORS 行为。可以设置为 true 以启用默认 CORS 配置，或提供一个对象进行详细配置。
• 默认值：true
• 示例：

  export default defineConfig({
    server: {
      cors: true,
    },
  });
  

7. strictPort

• 类型：boolean
• 说明：如果端口已被占用，是否严格禁止使用其他端口。
• 默认值：false
• 示例：

  export default defineConfig({
    server: {
      strictPort: true,
    },
  });
  

8. hmr

• 类型：boolean | object
• 说明：配置热模块替换（HMR）行为。可以设置为 false 以禁用 HMR，或提供一个对象进行详细配置。
• 默认值：true
• 示例：

  export default defineConfig({
    server: {
      hmr: {
        overlay: false, // 禁用 HMR 错误覆盖层
      },
    },
  });
  

9. watch

• 类型：object
• 说明：配置文件系统监听行为。
• 示例：

  export default defineConfig({
    server: {
      watch: {
        usePolling: true, // 使用轮询监听文件变化
      },
    },
  });
  

示例：完整的开发服务器配置

以下是一个完整的 vite.config.js 文件示例，包含常用的开发服务器配置选项：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
    host: '0.0.0.0',
    https: false,
    cors: true,
    strictPort: true,
    hmr: {
      overlay: false,
    },
    watch: {
      usePolling: true,
    },
  },
});

总结

通过 vite.config.js 文件中的 server 选项，可以灵活配置 Vite 的开发服务器行为，包括端口、代理、HTTPS、CORS、HMR 等。合理配置开发服务器可以提升开发体验，解决跨域问题，并优化开发环境。