多输入文件构建时Vite的base参数失效及modulepreload丢失问题求助

问题现象 #

• 单文件构建时，Vite能正确应用base参数，生成的入口文件包含modulepreload逻辑和带指定base路径的assetsURL函数，资源加载正常。
• 同时构建两个均引入core.js的入口文件时，base参数失效：入口文件丢失modulepreload相关代码，直接用相对路径引入共享chunk（如./core-CiAPw-a5.js），导致资源加载路径错误。

现有Vite配置 #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const baseBuildUrl = 'http://localhost.test/build/';
const unhashedJsFiles = ["profile", "register",];
export default defineConfig({
    base: baseBuildUrl,
    plugins: [
        laravel({
            input: [
                'resources/js/profile.js',
                'resources/js/register.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: [
            {
                find: /^~(.*)$/,
                replacement: '$1',
            },
        ],
    },
    build: {
        rollupOptions: {
            output: {
                entryFileNames: function (file) {
                    return unhashedJsFiles.includes(file.name)
                        ? 'assets/[name].js'
                        : 'assets/[name]-[hash].js';
                },
                chunkFileNames: function (file) {
                    return unhashedJsFiles.includes(file.name)
                        ? 'assets/[name].js'
                        : 'assets/[name]-[hash].js';
                },
            }
        }
    },
});

代码差异对比 #

单文件构建后的入口文件开头 #

const __vite__fileDeps=["assets/register-DYYaF7I7.css"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
const scriptRel="modulepreload",assetsURL=function(e){return"http://localhost.test/build/"+e},seen={},__vitePreload=function(n,t,r)

多文件构建后的入口文件开头 #

const __vite__fileDeps=["assets/register-DYYaF7I7.css"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
import{_ as b,g as i}from"./core-CiAPw-a5.js";b(()=>Promise.resolve({}),__vite__mapDeps([0]));let s=null,c=null,l=null;

解决方案 #

1. 配置Rollup的publicPath #

在build.rollupOptions.output中添加publicPath，强制所有chunk的引入路径使用指定的base URL，覆盖Vite的自动优化：

build: {
    rollupOptions: {
        output: {
            publicPath: baseBuildUrl, // 给所有资源路径添加base前缀
            entryFileNames: function (file) {
                return unhashedJsFiles.includes(file.name)
                    ? 'assets/[name].js'
                    : 'assets/[name]-[hash].js';
            },
            chunkFileNames: function (file) {
                return unhashedJsFiles.includes(file.name)
                    ? 'assets/[name].js'
                    : 'assets/[name]-[hash].js';
            },
        }
    }
},

该配置会让Rollup生成的所有chunk引入路径（包括共享的core.js chunk）都带上baseBuildUrl前缀，确保资源路径正确。

2. 强制保留每个入口的modulepreload逻辑 #

通过配置build.modulePreload，强制Vite为每个入口生成独立的modulepreload代码，避免因多入口优化导致代码缺失：

build: {
    // ... 现有配置
    modulePreload: {
        polyfill: true,
        resolveDependencies: (filename, deps) => deps // 确保所有依赖都被纳入预加载逻辑
    }
}

3. 验证构建结果 #

修改配置后重新执行构建，检查入口文件是否重新生成modulepreload和assetsURL相关代码，同时共享chunk的引入路径是否已替换为baseBuildUrl开头的绝对路径。

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