Superman_H的博客

有时候我们需要在项目构建完成后自动生成一个压缩包，以便于我们将构建后的文件方便地分享给他人。这时候我们可以使用 vite-plugin-zip-pack 插件来实现这个功能。我们可以这样配置 vite.config.js：```jsimport { defineConfig } from 'vite';import zipPack from 'vite-plugin-zip-pack';import { name as packageName } from '../package.json';

在 Vite 项目中，默认构建 `index.html` 。但有时候我们需要修改 `index.html` 为其他文件名，比如 `index-{时间戳}.html` 。我们可以这样配置 vite.config.js：```jsimport { defineConfig } from 'vite';import type { PluginOption } from 'vite';// 自定义插件type RenameHtmlPlugin = () => PluginOption;cons

配置 vite.config.json 文件：```tsimport { defineConfig } from 'vite';export default defineConfig({ build: { rollupOptions: { output: { assetFileNames(chunkInfo) { // css 文件 if

Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件Vite 解析 CSS 文件的过程：① 使用 fs 模块读取 .css 文件的内容② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内③ 将 style 标签插入到 index.html 的 head 标签中④ 将该 .css 文件的内容替换为 Js 脚本，以便于 CSS 模块化 & 热更新# CSS 模块化 (CSS Module)在协同开发时，可能会出现

# 构建模式`defineConfig` 接收参数 `{ mode }`，这里的 `mode` 就是构建的模式```javascriptimport { defineConfig } from 'vite';export default defineConfig(({ mode }) => { console.log('mode', mode);});"scripts": { "dev": "vite", // 执行 `vite`, mode 为 development