Vite 是一个快速的现代化前端构建工具,它默认情况下提供了开箱即用的开发环境,但也支持更详细的配置。以下是一些 Vite 中可用的主要配置选项:
root
1.类型: String
2.描述: 指定项目的根目录,默认为执行 Vite 命令的当前工作目录。
base
3.类型: String
4.描述: 静态资源的基础路径,默认为 /。用于在构建时生成正确的静态资源 URL。
publicDir
5.类型: String
6.描述: 指定公共文件目录的路径,默认为 public。Vite 将会将此目录下的文件复制到输出目录,同时保留相对路径。
build
7.类型: Object
8.描述: 构建选项,用于配置生产环境构建相关的参数。
9.target: 目标浏览器兼容性,默认为 'modules',也可以是 'es2015'、'esnext' 等。
10.minify: 是否启用代码压缩,默认为 terser。
11.assetsDir: 构建后静态资源输出目录,默认为 assets。
12.sourcemap: 是否生成 source map,默认为 false。
13.rollupOptions: 自定义 Rollup 配置,可以配置 Rollup 的插件、外部模块、输出格式等。
server
14.类型: Object
15.描述: 开发服务器相关配置。
16.host: 服务器主机名,默认为 'localhost'。
17.port: 服务器端口号,默认为 3000。
18.proxy: 代理配置,用于配置开发服务器的代理规则。
resolve
19.类型: Array<string>
20.描述: 配置模块解析选项,可以添加额外的模块解析目录。
css
21.类型: Object
22.描述: CSS 相关配置选项。
23.preprocessorOptions: 预处理器选项,例如 sass、less、stylus 等。
24.modules: 启用 CSS 模块化,默认为 false。
plugins
25.类型: Array<Plugin | (() => Plugin)>
26.描述: 自定义插件配置,可以配置自定义的 Vite 插件。
这些只是 Vite 配置中的一部分选项。你可以根据项目的需求进一步配置 Vite,以满足特定的开发需求。在 vite.config.js 文件中配置这些选项,例如:
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
root: './src',
base: '/my-app/',
build: {
target: 'esnext',
minify: true,
assetsDir: 'static',
sourcemap: false,
rollupOptions: {
external: ['react', 'react-dom'],
},
},
server: {
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
resolve: {
alias: {
'@': '/src',
},
},
css: {
modules: true,
preprocessorOptions: {
sass: {
additionalData: '@import "@/styles/variables.scss";',
},
},
},
plugins: [],
});
这里提供的配置仅供参考,具体的配置需求可能因项目而异。你可以根据 Vite 文档和自己的项目需求来灵活调整配置。



