配置

在项目比较简单的时候,Vite是可以不需要配置的,但是比较复杂的项目通常会自定义许多内容,其中也包括前后端分离开发时反向代理服务器的配置。

对Vite进行配置是通过项目根目录中的vite.config.js文件来完成的,如果使用了其他名称的配置文件,那么在执行Vite命令的时候就需要使用--config选项来明确指定。

对于使用reactreact-ts项目模板的React项目来说,项目的vite.config.js内容是下面这样的。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

示例中的defineConfig函数就是用来定义Vite配置的主要方法。由于Vite提供了TypeScript类型定义,所以在使用defineConfig方法的时候,将可以看到可用的代码提示。defineConfig中的常用配置项主要分为三种类型:共享配置、开发服务器配置和构建配置。其他的配置项还有依赖优化与SSR,这些属于比较不常用的配置项,在需要使用的时候可以直接参考Vite的文档。

除了可以接受一个对象来完成Vite的配置以外,defineConfig还可以接受一个函数来实现异步配置。