如何配置Vite生产构建内联外部脚本 解决路径引用报错

生产构建失效的核心问题出在external配置逻辑上：

• Rollup的external配置作用是标记不需要打包、运行时环境本身已存在的资源，匹配到的路径构建时会直接原样保留，不会做打包合并、路径重写、产物输出处理
• 现有配置手动把_svelte目录下除入口、类型声明外的所有业务TS文件全部匹配加入external，等于告知构建工具直接跳过这些文件的打包流程
• 开发环境下Vite使用独立实现的按需编译服务，不会读取build阶段的external规则，因此本地运行完全正常；生产构建时这些被标记为external的文件不会输出到产物目录，HTML中保留的原始/_svelte/api路径自然会报404错误。

• 直接删除匹配_svelte本地源码加入external的逻辑，本地业务代码永远不需要加入external列表，该配置仅适合标记CDN引入的全局库这类确定不需要打包的外部依赖
• 增加路径别名配置，将/_svelte开头的绝对导入映射到本地_svelte目录的实际绝对路径，开发、生产环境保持相同别名配置，避免两边路径解析逻辑不一致
• 脚本内联不需要额外实现复杂逻辑，Vite默认支持按体积阈值自动内联资源，调整assetsInlineLimit参数到符合需求的大小即可，小体积工具函数构建时会直接嵌入HTML，不会生成额外网络请求。

import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import fg from 'fast-glob'
import { resolve, basename } from 'path'

export default defineConfig(({ command, mode }) => {
  // 通用配置 开发生产环境共用
  const commonConfig = {
    plugins: [svelte({ configFile: '../../svelte.config.js' })],
    root: process.env.ROOT,
    resolve: {
      alias: {
        // 根据实际目录结构调整路径，_svelte在site目录下就用当前写法，和site同级就改成'../_svelte'
        '/_svelte': resolve(__dirname, '_svelte')
      }
    }
  }

  if (command === 'build') {
    // 匹配所有HTML入口文件
    const files = fg.sync('**/*.html', {
      cwd: process.env.ROOT,
      absolute: true,
    });

    return {
      ...commonConfig,
      build: {
        publicDir: '../public',
        // 小于4kb的资源自动内联，可按需调整阈值
        assetsInlineLimit: 4096,
        rollupOptions: {
          input: {
            main: resolve(process.env.ROOT, 'index.html'),
            ...Object.fromEntries(
              files.map((file) => [basename(file.replace('/index', ''), '.html'), file])
            ),
          },
          // 移除错误的本地源码external配置，仅保留真正需要外部引入的依赖
          external: []
        },
      },
    };
  }

  return commonConfig
});

配置修改后重新执行生产构建命令，检查dist目录产物：

• 原HTML中硬编码的/_svelte/api导入路径会被自动替换为带内容哈希的构建后JS路径
• 对应JS文件会正常输出到产物目录，不会再出现路径404报错
• 体积符合内联阈值的工具模块会直接嵌入HTML的script标签中，不需要额外加载外部文件

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