能否在Vite的rollupOptions中配置多输入输出？多语言打包方案咨询

问题描述 #

我需要为项目按语言环境输出多个.js文件，请问是否可行？是否需要创建多个vite.config.js文件分别构建？我当前使用npm run build命令将代码打包到dist文件夹。若采用分开构建的方式，每个配置大致如下，但输入路径和输出文件名需按地区/语言环境调整：

示例文件1

rollupOptions: {
    input: {
        index: "./src/en_US/sitemap.js",
    },
    output: {
        entryFileNames: "sitemap-en-us.js",
    },
},

示例文件2

rollupOptions: {
    input: {
        index: "./src/en_CA/file.js",
    },
    output: {
        entryFileNames: "file-en-ca.js",
    },
},

但该如何配置多个vite.config.js文件？或者能否在单个配置文件中设置多输入对应多输出？比如设置index1、index2等多个入口点？

方案一：单个配置文件实现多入口多输出 #

完全可行，不需要拆分配置文件，直接在单个vite.config.js里配置多个入口即可。

基础配置示例 #

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 配置多个入口，键名作为输出文件名的标识
      input: {
        sitemap_en_us: "./src/en_US/sitemap.js",
        file_en_ca: "./src/en_CA/file.js",
        // 可继续添加更多语言环境的入口文件
      },
      output: {
        // 用[name]占位符自动匹配input的键名，生成对应文件名
        entryFileNames: "[name].js",
        // 也可以指定输出到子目录，比如 `js/[name].js`
      }
    },
    // 默认打包到dist目录，可省略
    outDir: 'dist'
  }
});

执行npm run build后，dist目录会直接生成sitemap_en_us.js和file_en_ca.js。如果想要和示例一致的短横线命名（比如sitemap-en-us.js），可以两种方式处理：

• 把input的键名直接改成sitemap-en-us
• 用自定义函数生成文件名：

output: {
  entryFileNames: (chunkInfo) => {
    const nameMap = {
      sitemap_en_us: 'sitemap-en-us.js',
      file_en_ca: 'file-en-ca.js'
    };
    return nameMap[chunkInfo.name] || `${chunkInfo.name}.js`;
  }
}

方案二：多个配置文件分别构建 #

如果不同语言环境需要独立的Vite配置（比如不同的插件、环境变量），可以拆分多个配置文件。

步骤1：创建多份配置文件 #

比如创建vite.en-us.config.js和vite.en-ca.config.js，以vite.en-us.config.js为例：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: "./src/en_US/sitemap.js"
      },
      output: {
        entryFileNames: "sitemap-en-us.js"
      }
    },
    // 可选：打包到子目录区分语言，比如`dist/en-us`
    outDir: 'dist'
  }
});

步骤2：配置package.json的构建命令 #

在package.json的scripts里添加对应命令：

{
  "scripts": {
    "build": "npm run build:en-us && npm run build:en-ca",
    "build:en-us": "vite build --config vite.en-us.config.js",
    "build:en-ca": "vite build --config vite.en-ca.config.js"
  }
}

执行npm run build就会依次执行两个配置的构建，文件统一输出到dist目录（或各自的子目录）。

内容的提问来源于stack exchange，提问作者Schneider G