阅读原文: https://www.xiaozaoshu.top/articles/vite-config-server
server 配置是 Vite 中用于设置开发服务器行为的部分。它控制了开发环境下的 HTTP 服务器，处理了端口、代理、热更新等功能。以下是对 server 配置项的详细介绍。

server 配置

server: {
  port: 3000,
  open: true,
  https: false,
  proxy: {},
  cors: true,
  hmr: true,
  watch: {
    usePolling: false,
  },
  fs: {
    strict: false,
  },
  headers: {},
}

主要配置项详细说明

---

1. port

port: 3000

• 设置开发服务器的端口号，默认是 3000。
• 如果你有多个项目同时开发，可以设置不同的端口号。

示例：

• 你可以将端口设置为 5000，使服务器在 http://localhost:5000 上运行。

---

2. open

open: true

• 当你启动开发服务器时，是否自动在浏览器中打开页面。
• 默认为 false，即不自动打开浏览器。
• 如果设置为 true，则每次启动服务器时都会自动打开默认浏览器，访问 http://localhost:{port}。

示例：

open: 'chrome'  // 只会在 Chrome 中打开页面

---

3. https

https: false

• 开启或关闭 HTTPS。
• 默认为 false，即不启用 HTTPS。
• 如果你的开发环境需要使用 HTTPS，可以将其设置为 true 或配置证书。

示例：

https: {
  key: fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.crt'),
}

此配置用于开发时启用 HTTPS。

---

4. proxy

proxy: {
  '/api': {
    target: 'http://localhost:8081', // 目标地址
    changeOrigin: true, // 修改请求头的 Origin 字段
    rewrite: (path) => path.replace(/^\/api/, '')  // 重写路径
  },
}

• 代理配置允许你将特定请求转发到另一个服务器，通常用于解决跨域问题。
• target：目标服务器地址，将会转发请求到这个地址。
• changeOrigin：更改请求头中的 Origin 字段，通常用于跨域请求。
• rewrite：路径重写，用来修改请求路径。比如去掉路径中的某些部分。

示例：

• 将所有请求 /api 开头的路径代理到 http://localhost:8081，并移除 /api 前缀。

---

5. cors

cors: true

• 启用或禁用跨域资源共享（CORS）支持。
• 默认为 false，即禁用 CORS。如果启用，服务器会允许跨域请求。
• 在开发环境中，如果你的前端和后端分开部署，并且需要发送跨域请求，可以启用它。

示例：

cors: {
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST'],
}

---

6. hmr (Hot Module Replacement)

hmr: true

• 是否启用 热模块替换（HMR），即修改源代码时，自动更新浏览器页面。
• 默认为 true，当启用 HMR 时，修改代码后浏览器页面会自动更新。

示例：

hmr: {
  protocol: 'ws',  // 使用 WebSocket 作为 HMR 的通信协议
  host: 'localhost',
  port: 3000,
}

---

7. watch

watch: {
  usePolling: false,
}

• usePolling：设置为 true 后，开发服务器会轮询文件变化，而不是使用默认的 fs.watch 监听方式。
  适用于某些操作系统或文件系统不支持 fs.watch，比如某些 Docker 容器环境或虚拟机中。

示例：

watch: {
  usePolling: true,
}

---

8. fs

fs: {
  strict: false
}

• strict：如果设置为 true，则 Vite 只允许从项目的根目录及其子目录中提供文件。
• 如果你想允许访问项目之外的目录，可以设置为 false。

示例：

fs: {
  strict: false,  // 允许访问项目之外的文件
}

---

9. headers

headers: {
  'X-Custom-Header': 'my custom header'
}

• 用来设置服务器响应头。可以用于设置自定义的 HTTP 头。

示例：

• 可以用它来设置 CORS 相关的 Access-Control-Allow-Origin 等响应头。

---

总结

• port: 设置开发服务器的端口。
• open: 是否自动打开浏览器访问页面。
• https: 启用 HTTPS 配置。
• proxy: 配置请求代理，解决跨域问题。
• cors: 是否启用跨域支持。
• hmr: 启用热模块替换（HMR），支持开发时代码热更新。
• watch: 配置文件监听方式，适配不同环境。
• fs: 控制文件系统访问权限。
• headers: 设置自定义的 HTTP 响应头。

这些配置项让你可以全面控制开发环境中的服务器行为，方便进行开发和调试。