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 文档和自己的项目需求来灵活调整配置。