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

server 配置

// vite.config.js  
import { defineConfig } from 'vite'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  server: {  
    origin: 'http://127.0.0.1:8080', //用于定义开发调试阶段生成资源的 origin
    host: '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, //默认值：false
    proxy: {  //开发服务器配置自定义代理规则
      // 字符串简写写法：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',  
  },  
  
  // ...其他配置...  
})