VUE3/Vite项目动态导入客户端配置打包后失效问题

核心原因 #

Vite在生产构建时依赖静态代码分析识别需打包的文件，你当前用完全拼接的字符串（"./clients/" + currentClient + "/config"）做动态导入，这种写法让Vite无法在构建阶段预判具体导入路径，因此不会将对应客户端的config.ts纳入打包产物。

开发环境下Vite是按需编译文件，运行时能找到对应资源；但生产构建是预打包所有可识别的依赖，这种无固定路径片段的动态导入不在分析范围内，自然不会被包含。

解决办法 #

1. 保留固定路径片段（推荐）

修改动态导入写法，让Vite能识别到可能的文件范围，比如用模板字符串保留固定前缀和后缀：

const currentClient = 'sonypictures';
import(`./clients/${currentClient}/config`).then((ClientConfig) => {
    app.config.globalProperties.ClientConfig = ClientConfig.default;
}).catch(() => {
    alert(`Client configuration doesn't exist! (/clients/${currentClient}/config.ts)`);
});

这种写法下，Vite会扫描./clients/下所有子目录里的config.ts文件并全部打包，运行时再根据currentClient加载对应文件。

2. 手动指定打包文件

若不想打包所有客户端配置，可在vite.config.ts中通过build.rollupOptions.input手动声明需包含的文件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: './src/main.ts',
        sonypConfig: './src/clients/sonypictures/config.ts'
        // 其他客户端配置可按需添加
      }
    }
  }
});

该方式需手动维护所有客户端配置文件，扩展性较差，适合客户端数量固定且较少的场景。

3. 用环境变量指定客户端

如果每次构建仅需对应单个客户端的配置，可通过环境变量在构建阶段确定导入文件，让Vite能静态分析到具体路径：

• 构建时设置环境变量：VITE_CURRENT_CLIENT=sonypictures npm run build
• 在main.ts中使用：

import(`./clients/${import.meta.env.VITE_CURRENT_CLIENT}/config`).then((ClientConfig) => {
    app.config.globalProperties.ClientConfig = ClientConfig.default;
}).catch(() => {
    alert(`Client configuration doesn't exist!`);
});

这种方式每次构建仅打包指定客户端的配置，产物体积更小，适合单客户端部署场景。

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