Vite项目中public/manifest.xml环境变量替换失效问题咨询

1. 操作是否有误？ #

这不是操作错误，是Vite的默认行为限制——它只会自动对HTML入口文件（比如index.html）执行环境变量替换逻辑，public目录下的其他静态资源（包括manifest.xml）不会被默认纳入替换流程，所以直接套用HTML的替换方案肯定不生效。

2. 是否需要迁移manifest.xml文件？ #

不是必须的，但可以作为可选解决方案。如果把manifest.xml移到src目录下，就能让它进入Vite的资源处理流程，之后可通过define选项或插件实现替换。比如移到src后，在vite.config.js里配置让它被打包到输出目录：

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        manifest: './src/manifest.xml'
      }
    }
  }
})

如果不想移动文件，直接用插件处理public目录下的文件更省事。

3. 是否需要优化环境变量配置（如使用VITE_前缀）？ #

是的，Vite只会自动暴露带有VITE_前缀的环境变量到客户端侧的代码/资源中。所以你的环境变量必须命名为VITE_HOSTNAME这类格式，比如在.env.production里写：

VITE_HOSTNAME=https://your-production-domain.com

不带VITE_前缀的变量默认不会被Vite注入，自然无法完成替换。

4. 是否必须编写自定义Vite插件，是否已有现成插件可用？ #

不需要自己从零编写，有现成插件可以用，比如vite-plugin-replace，只需简单配置就能指定要替换的文件和变量映射：

import replace from 'vite-plugin-replace'

export default defineConfig({
  plugins: [
    replace({
      include: ['public/manifest.xml'],
      values: {
        '%HOSTNAME%': process.env.VITE_HOSTNAME
      }
    })
  ]
})

如果不想用第三方插件，写个极简的自定义插件也很简单，只需要在构建时拦截manifest.xml文件并替换变量：

export default defineConfig({
  plugins: [
    {
      name: 'manifest-var-replacer',
      apply: 'build',
      transform(code, id) {
        if (id.includes('public/manifest.xml')) {
          return code.replace(/%HOSTNAME%/g, process.env.VITE_HOSTNAME)
        }
        return code
      }
    }
  ]
})

注意要确保环境变量已正确加载，可以通过.env文件或者构建命令（比如VITE_HOSTNAME=xxx npm run build）传入。

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