在使用 Vite 开发前端应用时，我们经常会遇到需要定制化构建输出的情况。其中一个常见的需求是修改构建后的 index.html 文件的文件名。Vite 默认将构建后的 HTML 文件命名为 index.html，但是在某些特定场景下，我们可能希望更改这个文件的名称。下面将详细介绍如何实现这一点，并提供代码示例。
使用 Vite 修改构建输出的文件名
首先，我们需要确保已经正确安装并配置了 Vite。在项目根目录下，你应该有一个 vite.config.js 文件，这是我们主要进行配置的地方。
npm install vite --save-dev
接下来，我们可以在 vite.config.js 中进行相应的配置。Vite 提供了 build.rollupOptions 来配置 Rollup 的构建选项，借助这个选项，我们可以修改 HTML 文件的名称。
以下是一个示例配置，演示如何将构建后的 index.html 文件重命名为 my-custom-name.html：
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
entryFileNames: 'assets/[name].js',
chunkFileNames: 'assets/[name].js',
assetFileNames: (assetInfo) => {
// 根据文件类型输出不同类型的文件
if (assetInfo.name === 'index.html') {
return 'my-custom-name.html';
}
return 'assets/[name].[ext]';
},
},
},
},
});
解释配置
-
import { defineConfig } from 'vite';：首先，我们导入 Vite 提供的
defineConfig方法，这是一个方便的配置包装器，可以帮助我们在 TypeScript 环境中获得更好的类型推导。 -
export default defineConfig({...});：这是导出 Vite 配置的标准方式。
-
build.rollupOptions.output：该属性用于配置输出的文件名格式。我们可以在这里为入口文件、代码分块和静态资源文件设置格式。
-
entryFileNames 和 chunkFileNames：这些属性指定了输出的 JavaScript 文件的命名规则。在示例中，我们将其设置为
assets/[name].js，即将所有的 JavaScript 文件放在assets目录下。 -
assetFileNames：这是关键部分。我们使用了一个函数来根据不同的资源类型生成文件名。通过检查
assetInfo.name，我们可以确认当前处理的文件是否为index.html。如果是，则返回新的文件名my-custom-name.html，否则按默认规则处理其他静态资源。
构建项目
配置完成后，可以通过以下命令进行构建：
npm run build
构建完成后，你会在 dist 目录下看到生成的文件，其中 index.html 将会被命名为 my-custom-name.html。
总结
通过以上步骤，我们成功地修改了 Vite 项目构建输出的 index.html 文件名。这种灵活的配置能力使 Vite 在处理不同需求时显得尤为强大。通过使用 rollupOptions，你可以根据需要进行更复杂的自定义设置，满足各种项目要求。在实际开发中，通过这种方式对构建配置进行调整，可以帮助项目更好地适应不同的发布需求和环境。
