深度定制你的Vite开发服务器配置

在现代前端开发中，Vite以其极速的冷启动和热模块替换（HMR）特性赢得了广泛的赞誉。然而，要让Vite更好地服务于你的开发需求，深入理解并合理配置其开发服务器选项显得尤为重要。本文将引导你如何通过vite.config.js文件，细致调整Vite开发服务器的各项配置，从而优化你的开发体验。

// vite.config.js
export default {
  // 基础公共路径，如果你的项目部署在服务器的子路径下，需要设置这个选项
  base: '/my-app/',

  server: {
    // 设置开发服务器的端口
    port: 3000,

    // 开启HTTPS，你也可以提供一个HTTPS配置对象
    https: true,

    // 代理配置，如果你需要代理API请求到另一个服务器
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',//代理的目标URL
        changeOrigin: true,//是否开启跨域资源共享
        rewrite: (path) => path.replace(/^\/api/, '')//将其中的/api前缀替换掉
      },
    },

    // CORS设置，默认情况下Vite允许跨域请求
    cors: false, // 设置为false来禁用CORS

    // 如果端口已被占用，设置为false来允许Vite尝试下一个可用端口
    strictPort: false,

    // 开启/关闭热模块替换（HMR）
    hmr: false, // 设置为false来禁用HMR
  },
};

在这个配置文件中，我们设置了Vite开发服务器的基础公共路径、端口、HTTPS、代理、CORS、严格端口检查以及热模块替换（HMR）等选项。

• base：用于设置项目的基础公共路径，特别是当你的项目部署在服务器的子路径下时。
• server.port：用于设置开发服务器的端口号。
• server.https：用于开启HTTPS，你也可以提供一个配置对象来进一步定制HTTPS的行为。
• server.proxy：用于设置代理，以便将API请求代理到另一个服务器。
• server.cors：用于控制CORS（跨源资源共享）行为，默认情况下Vite允许跨域请求。
• server.strictPort：如果设置为false，则当端口已被占用时，Vite将尝试使用下一个可用端口。
• server.hmr：用于控制热模块替换（HMR）的行为，默认情况下是开启的，但你可以设置为false来禁用它。

通过修改这些配置选项，你可以根据需要定制Vite开发服务器的行为。

默认属性：

export default defineConfig({
  base: '/',
  server: {
    port: 3000,
    https: false,
    proxy: undefined, // 默认没有设置
    cors: true,       // 默认允许跨域请求
    strictPort: false,// 默认尝试下一个端口
    hmr: true,        // 默认开启HMR
  }
});

通过调整这些配置，根据项目的具体需求，灵活定制Vite开发服务器的行为