Vite构建Vue经Vercel PKG打包时如何保留指定ES模块为外部依赖

问题场景 #

基于Vite搭建的Vue项目，生产构建完成后需要通过Vercel PKG打包。项目内有一个ESModule类型的库需要保留为外部依赖，不打入Vue生产构建产物，实现PKG打包完成后该外部库可单独更新，无需重新执行PKG打包流程。

已尝试Vite官方文档提及的所有构建时排除外部依赖的方案，最新配置如下：

export default defineConfig({
    build: {
        rollupOptions: {
            external: ["../custom/custom.es.js"],
        },
    },
    plugins: [
        vue()
    ]
});

项目入口main.ts中引入该依赖的代码如下：

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);

import CustomComponents from '../custom/custom.es.js';

app.use(CustomComponents);
app.mount('#app');

当前故障现象：执行Vite生产构建时，指定依赖仍然会被打包进生产bundle文件，运行时不会从外部路径加载该库，直接调用构建产物内打包的对应代码。

失效原因 #

现有配置不生效有两个核心问题：

1. Vite会先把所有相对路径引入解析为绝对文件系统路径，再传给Rollup做依赖处理，字面量写死的相对路径"../custom/custom.es.js"无法匹配Rollup实际拿到的模块ID，无法触发外部依赖标记逻辑。
2. 未配置rollupOptions.output.paths，Rollup就算识别到外部依赖，也不知道运行时要从什么路径加载该文件，默认会尝试把依赖内联进bundle。

修复步骤 #

• 调整Vite配置，用匹配函数替代固定路径字符串标记外部依赖，同时配置外部依赖运行时加载路径

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'node:path'
  
  export default defineConfig({
      build: {
          rollupOptions: {
              // 用函数匹配模块ID，兼容Vite路径解析后的绝对路径格式
              external: (id) => id.endsWith(path.join('custom', 'custom.es.js')),
              output: {
                  // 声明外部依赖的运行时加载路径
                  paths: (id) => {
                      if (id.endsWith(path.join('custom', 'custom.es.js'))) {
                          // 此处路径需和PKG打包后custom.es.js的实际存放位置对应，示例为产物同级custom目录
                          return './custom/custom.es.js'
                      }
                  }
              }
          },
      },
      plugins: [vue()]
  });
  

• 调整入口文件引入逻辑，确保运行时从外部路径加载依赖，避免静态分析时路径被转换

  import { createApp } from 'vue'
  import App from './App.vue'
  
  const app = createApp(App)
  // 动态导入外部ESM，路径和output.paths中配置的运行时路径保持一致
  import('./custom/custom.es.js').then(({ default: CustomComponents }) => {
      app.use(CustomComponents)
      app.mount('#app')
  })
  

• 补充PKG打包配置：将存放custom.es.js的custom目录加入PKG打包的资源排除列表，确保PKG不会把该目录文件打包进二进制包，运行时可直接读取外部目录文件实现单独更新。

注意事项：如果目标ESM库本身存在其他内部依赖，需要同步把这些依赖加入external匹配规则，否则对应依赖仍然会被打入bundle。如果是浏览器环境运行，要确保外部存放的custom.es.js是浏览器兼容的ESM格式，不要包含Node.js原生API。

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