如何在 Vite 中移除多入口点子文件夹？

在 Vite 中移除多入口点子文件夹

在使用 Vite 构建基于 Vue.js 的项目时，您可能会遇到为每个入口点生成一个额外子文件夹的问题。虽然这在某些情况下可能是理想的，但在其他情况下，您可能需要移除这些子文件夹以获得更简洁的目录结构。本文将指导您完成在 Vite 中解决此问题的步骤，以便您的项目结构符合预期。

问题

假设您有一个 Vue.js 项目包含多个入口点，例如登录页和主应用程序。默认情况下，Vite 将为每个入口点生成一个单独的子文件夹，如下所示：

├─ my-app/
│  ├─ dist
│  ├─ login
│  ├─ index.html

但是，您可能希望移除 login 子文件夹并直接在 dist 目录中生成 index.html 文件，如下所示：

├─ my-app/
│  ├─ dist
│  ├─ index.html

解决方案

要移除 Vite 生成的子文件夹，需要修改 vite.config.ts 文件。以下是修改后的配置：

import { resolve } from 'path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  base: '/', // Set the base path for assets
  plugins: [Vue(), VueRouter()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: resolve("./login/index.html", ""),
      output: {
        entryFileNames: '[name].[hash].js',
      },
    },
  },
});

关键修改是添加 output.entryFileNames 选项，将其设置为 [name].[hash].js。此选项将确保 Vite 仅输出一个捆绑文件，文件名包含模块名称和哈希值。这将防止 Vite 创建额外的子文件夹。

代码示例

vite.config.ts

import { resolve } from 'path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  base: '/', // Set the base path for assets
  plugins: [Vue(), VueRouter()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: resolve("./login/index.html", ""),
      output: {
        entryFileNames: '[name].[hash].js',
      },
    },
  },
});

目录结构

使用修改后的配置后，Vite 将不再生成额外的 login 子文件夹，而是直接在 dist 目录中输出 index.html 文件。您的目录结构现在将如下所示：

├─ my-app/
│  ├─ dist
│  ├─ index.html

常见问题解答

1. 为什么 Vite 默认创建子文件夹？

Vite 默认创建子文件夹是为了保持模块之间的分离性。每个入口点被视为一个独立的模块，因此将其放在单独的子文件夹中可以防止模块之间出现冲突。

2. 移除子文件夹对我的应用程序有什么影响？

移除子文件夹不会影响应用程序的运行方式。它只是改变了 Vite 构建输出的目录结构。

3. 我可以用这种方法移除所有入口点的子文件夹吗？

是的，您可以使用相同的方法移除所有入口点的子文件夹。只需在 vite.config.ts 文件中为每个入口点设置 output.entryFileNames 选项即可。

4. 移除子文件夹后，如何访问我的入口点？

当您移除子文件夹时，您的入口点将通过其名称进行访问。例如，如果您有一个名为 login 的入口点，则可以访问它 https://example.com/login。

5. 移除子文件夹后，我需要修改我的路由配置吗？

您不需要修改路由配置。Vite 将自动处理路由，确保您的应用程序正常工作。

结论

通过修改 vite.config.ts 文件并设置 output.entryFileNames 选项，您可以轻松地从 Vite 构建输出中移除多入口点的子文件夹。这将帮助您保持更简洁的目录结构，并简化您的应用程序的部署和维护。