配置
在项目比较简单的时候,Vite是可以不需要配置的,但是比较复杂的项目通常会自定义许多内容,其中也包括前后端分离开发时反向代理服务器的配置。
对Vite进行配置是通过项目根目录中的vite.config.js
文件来完成的,如果使用了其他名称的配置文件,那么在执行Vite命令的时候就需要使用--config
选项来明确指定。
对于使用react
和react-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
还可以接受一个函数来实现异步配置。