Vue+TypeScript+Vite项目打包保留config.ts可定制方案问询

方案一：利用Vite的public目录（最简单） #

Vite默认会把public目录下的所有文件原封不动复制到dist根目录，这是最省心的实现方式：

• 在项目根目录新建public/config.js，直接定义全局配置对象：

  window.APP_CONFIG = {
    API_BASE_URL: 'https://your-default-api.com',
    // 可添加其他配置项
  }
  

• 在index.html里手动引入这个文件，必须放在main入口文件之前，确保配置先加载完成：

  <script src="/config.js"></script>
  <script type="module" src="/src/main.ts"></script>
  

• 项目代码中使用配置：为了让TypeScript不报错，在src/env.d.ts里添加全局类型声明：

  interface Window {
    APP_CONFIG: {
      API_BASE_URL: string;
      // 对应config.js里的其他字段
    }
  }
  

  之后在组件或工具类里直接通过window.APP_CONFIG.API_BASE_URL调用配置即可。

方案二：Rollup配置+文件复制（适合坚持用TS配置文件的场景） #

如果你的配置原本是TS格式（比如src/config.ts），可以通过Vite插件+Rollup配置实现需求：

1. 调整src/config.ts为导出对象的形式：

   export default {
     API_BASE_URL: 'https://your-default-api.com'
   }
   

2. 安装文件复制插件并修改Vite配置：
   先安装依赖：

   npm install vite-plugin-static-copy --save-dev
   

   然后修改vite.config.ts：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import { viteStaticCopy } from 'vite-plugin-static-copy'
   import fs from 'fs'
   import path from 'path'
   
   // 提前把TS配置转成浏览器可识别的JS格式
   const configTsPath = path.resolve(__dirname, 'src/config.ts')
   const configJsContent = fs.readFileSync(configTsPath, 'utf-8')
     .replace('export default ', 'window.APP_CONFIG = ')
   
   export default defineConfig({
     plugins: [
       vue(),
       viteStaticCopy({
         targets: [
           {
             src: configJsContent,
             dest: '.',
             rename: 'config.js'
           }
         ]
       })
     ],
     build: {
       rollupOptions: {
         external: ['/config.js'], // 标记为外部依赖，不打包进chunk
       }
     }
   })
   

3. 同样在index.html里引入/config.js，并添加TS全局类型声明，代码中通过window.APP_CONFIG访问配置。

为什么rollup.exclude/external不满足需求？ #

• rollup.exclude仅告诉Rollup不要把目标文件打包进最终chunk，但不会自动将文件复制到dist目录，构建后dist里找不到该文件，运行时会报错。
• rollup.external是把模块标记为外部依赖，意味着运行时需要从外部加载它，但默认不会自动复制文件到dist，必须配合文件复制操作才能生效。

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