工具链之 Vite 开发服务器所有选项解析（三）

server 配置

// vite.config.js  
import { defineConfig } from 'vite'  // https://vitejs.dev/config/  
export default defineConfig({  server: {  origin: 'http://127.0.0.1:8080', //用于定义开发调试阶段生成资源的 originhost: '0.0.0.0', // 监听所有可用的网络接口  port: 3000, // 设置端口号，可以根据需要修改  strictPort： true, //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口https: {  key: fs.readFileSync('./path/to/your/server.key'), // 使用 Node.js 的 fs 模块读取私钥文件  (服务器私钥的路径或内容)cert: fs.readFileSync('./path/to/your/server.cert'), // 使用 Node.js 的 fs 模块读取证书文件  (服务器证书的路径或内容)ca: fs.readFileSync('./XX/xx.cert'), //附加的 CA 证书的路径或内容数组，用于创建完整的证书链。pfx: fs.readFileSync('./XX/xx.cert'),//或 pfxPath：包含私钥、证书和 CA 证书的 PFX 或 PKCS#12 编码的文件路径或内容。passphrase:'XXXX'//用于证书的密码短语}, open: 'google chrome', // 在开发服务器启动后自动打开 Google Chrome 浏览器--或--open: true, // 在开发服务器启动后自动打开浏览器--或--open: false, //默认值：falseproxy: {  //开发服务器配置自定义代理规则// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo'/foo': 'http://localhost:4567',// 带选项写法：http://localhost:5173/api/bar --http://jsonplaceholder.typicode.com/bar'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},// 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/'^/fallback/.*': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/fallback/, ''),},// 使用 proxy 实例'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,configure: (proxy, options) => {// proxy 是 'http-proxy' 的实例}},// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io'/socket.io': {target: 'ws://localhost:5174',ws: true,},},cors: {   // 选项用于配置跨域资源共享（CORS）策略origin: ['http://localhost:3000', 'https://example.com'], // 允许来自这些源的请求  methods: ['GET', 'POST', 'OPTIONS'], // 允许的方法  allowedHeaders: ['Content-Type', 'X-Custom-Header'], // 允许的头  exposedHeaders: ['Custom-Exposed-Header'], // 暴露给客户端的响应头  credentials: true, // 允许携带凭据  maxAge: 86400, // 预检请求的有效期为 24 小时  }, headers: {   //选项允许你为开发服务器添加自定义的 HTTP 响应头。这对于需要设置特定 HTTP 头的场景非常有用，比如设置安全相关的头（如 Content-Security-Policy）、缓存控制头（如 Cache-Control）或其他自定义头。'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com",  'Cache-Control': 'no-cache, no-store, must-revalidate',  'X-Custom-Header': 'custom value',  'X-Another-Header': (url, ctx) => {  // 根据请求 URL 或上下文动态设置头值  if (url.pathname === '/dynamic-header') {  return 'dynamic value';  }  return 'default value';  }  }, hmr: {   //配置热模块替换（Hot Module Replacement，简称 HMR）的行为// 使用 'wss' 协议（WebSocket Secure）  protocol: 'wss',  // 指定 HMR 服务器的主机名  hostname: 'localhost',  // 指定 HMR 服务器的端口号  port: 443,  // WebSocket 连接的路径  path: '/hmr',  // 设置超时时间为 5000 毫秒  timeout: 5000,  // 在出现错误时显示一个覆盖层  overlay: true,  // 当 HMR 更新失败时强制刷新页面  reload: true,  // 自定义 HMR 客户端的行为  client: {  // ...自定义配置  }  },  // warmup选项主要用于配置开发服务器的预热（warmup）行为。预热是 Vite 的一种特性，它会在开发服务器启动后，预先构建一些页面或资源，以便在后续请求时能够更快地响应。这有助于提高开发时的页面加载速度和响应性能。warmup: 3,  // 启用预热功能，并指定预热时需要访问的页面数量 --或--warmup: true,  //Vite 会在开发服务器启动后自动进行预热middlewareMode: true, // 启用中间件模式, 默认值：false},  fs: {strict: true, //限制为工作区 root 路径以外的文件的访问（自 Vite 2.7 起默认启用）// 允许为项目根目录的上一级提供服务allow: ['..']--或--allow: [// 搜索工作区的根目录searchForWorkspaceRoot(process.cwd()),// 自定义规则'/path/to/custom/allow_directory','/path/to/custom/allow_file.demo',],},// 这是默认值，它将把所有路径中含有 node_modules 的文件// 添加到忽略列表中。sourcemapIgnoreList(sourcePath, sourcemapPath) {return sourcePath.includes('node_modules')},
})

server.watch

在 Vite 中，server.watch 选项通常不是直接暴露给用户进行配置的，因为它涉及到 Vite 内部对文件系统的监视机制。然而，Vite 确实提供了一些与文件监视相关的配置选项，这些选项通常包含在 resolve、build 或其他配置部分中，而不是直接放在 server 配置下。
其中包含了一些与文件系统相关的配置

// vite.config.js  
import { defineConfig } from 'vite'  export default defineConfig({  // ...其他配置...  resolve: {  alias: {  // 配置别名，影响哪些文件被 Vite 监视和构建  '/@/': '/src/',  },  },  // build 配置通常用于生产构建，但也会影响开发时的监视行为  build: {  rollupOptions: {  input: {  // 指定 Rollup 的输入文件，间接影响 Vite 监视的文件  main: 'src/main.js',  // ...其他入口点...  },  },  // 禁用依赖项预构建以提高启动速度（注意：这可能会降低后续构建的速度）  optimizeDeps: {  disabled: true,  },  // 指定构建缓存的目录  cacheDir: 'node_modules/.vite',  },  // ...其他配置...  
})