开发服务器选项配置

项目配置与基础使用

Vite.js 的配置文件 vite.config.js 位于项目根目录，通过导出一个配置对象来定制构建行为。基本配置结构如下：

import { defineConfig } from 'vite'

export default defineConfig({
  // 配置选项
})

常用基础配置项包括：

• root: 项目根目录（默认 process.cwd()）
• base: 开发或生产环境服务的公共基础路径
• publicDir: 静态资源服务的文件夹（默认 'public'）
• cacheDir: 存储缓存文件的目录（默认 'node_modules/.vite'）

示例配置：

export default defineConfig({
  root: './src',
  base: '/admin/',
  publicDir: 'assets',
  cacheDir: '../.vite_cache'
})

开发服务器选项配置

开发服务器配置通过 server 选项进行定制，支持以下常用参数：

主机与端口设置

server: {
  host: '0.0.0.0',  // 指定服务器应该监听哪个 IP 地址
  port: 3000,       // 指定开发服务器端口
  strictPort: true, // 若端口被占用则直接退出
  open: '/login'    // 启动时自动打开浏览器到指定路由
}

代理配置

实现 API 请求代理，解决跨域问题：

server: {
  proxy: {
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, ''),
      // 更多高级配置
      configure: (proxy, options) => {
        // 可以访问底层 http-proxy 实例
      }
    }
  }
}

HTTPS 配置

启用 HTTPS 开发服务器：

server: {
  https: {
    key: fs.readFileSync('path/to/key.pem'),
    cert: fs.readFileSync('path/to/cert.pem')
  }
}

或使用自签名证书：

server: {
  https: true
}

文件系统限制

控制对文件系统的访问：

server: {
  fs: {
    strict: true,      // 限制为工作区根目录
    allow: [
      '/src/assets',
      '/node_modules/.vite'
    ],
    deny: ['.env', '*.secret']
  }
}

热模块替换配置

HMR 相关配置示例：

server: {
  hmr: {
    overlay: false,    // 禁用错误覆盖层
    protocol: 'ws',    // 使用 websocket 协议
    host: 'localhost',
    port: 3001,
    // 完全自定义 HMR 连接
    server: {
      // 自定义 websocket 服务器实现
    }
  }
}

自定义中间件

扩展开发服务器功能：

server: {
  middlewareMode: true,
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      if (req.url === '/custom') {
        res.end('Hello from custom middleware')
      } else {
        next()
      }
    })
  }
}

预构建选项

优化依赖预构建：

optimizeDeps: {
  entries: [
    'src/main.js',
    'src/entries/*.js'
  ],
  exclude: ['heavy-package'],
  include: ['missing-dep'],
  force: true,  // 强制重新预构建
  esbuildOptions: {
    plugins: [
      // 自定义 esbuild 插件
    ]
  }
}

环境变量配置

环境变量处理示例：

define: {
  __APP_VERSION__: JSON.stringify('1.0.0'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
},
envDir: './env',  // 环境变量文件目录
envPrefix: 'VITE_' // 只注入指定前缀的环境变量

构建目标配置

针对不同浏览器的构建：

build: {
  target: ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14'],
  polyfillModulePreload: false,
  cssTarget: 'chrome61'  // CSS 压缩目标
}

高级服务器配置

完整的服务器配置示例：

server: {
  watch: {
    usePolling: true,  // 对网络文件系统需要轮询
    interval: 1000     // 轮询间隔
  },
  warmup: {
    clientFiles: [
      './src/utils/*.js',
      './src/components/**/*.vue'
    ]
  },
  chokidar: {
    ignoreInitial: true,
    awaitWriteFinish: {
      stabilityThreshold: 2000,
      pollInterval: 100
    }
  }
}

多环境配置处理

根据不同环境加载不同配置：

// vite.config.js
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV)
    },
    server: {
      proxy: env.API_PROXY ? {
        '/api': {
          target: env.API_PROXY
        }
      } : undefined
    }
  }
})

插件系统集成

常用插件配置示例：

import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    // 自定义插件
    {
      name: 'custom-plugin',
      config(config) {
        // 修改配置
      },
      configureServer(server) {
        // 扩展服务器
      }
    }
  ]
})

性能优化配置

构建优化选项：

build: {
  minify: 'terser',  // 或 'esbuild'
  terserOptions: {
    compress: {
      drop_console: true
    }
  },
  sourcemap: 'hidden',
  chunkSizeWarningLimit: 1000,
  reportCompressedSize: false,
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor'
        }
      }
    }
  }
}

自定义构建逻辑

扩展 Rollup 配置：

build: {
  rollupOptions: {
    input: {
      main: 'index.html',
      admin: 'admin.html'
    },
    plugins: [
      require('rollup-plugin-image')({
        exclude: /\.svg$/
      })
    ],
    external: ['jquery'],
    output: {
      globals: {
        jquery: '$'
      }
    }
  }
}

调试配置

开发调试支持：

server: {
  sourcemapIgnoreList(sourcePath) {
    return sourcePath.includes('node_modules')
  },
  debug: {
    inspector: {
      host: '127.0.0.1',
      port: 9229
    }
  }
}