如何使用 Vite 在不同环境下提供不同的 index.html？

Question

在webpack中，我使用了HtmlWebpackPlugin插件，它让我可以指定要使用的HTML模板。我想知道如何在Vite中实现同样的效果。

目标是在生产环境（build）中使用React CDN，但我不想在开发环境中使用它。

我的webpack配置中有类似以下内容的代码：

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/template.dev.html'
    })
  ]
})

- Christian Gama

Answer 1

你可以使用 vite-plugin-html。根据文档，它支持像 HtmlWebpackPlugin 一样设置 template 文件。如果要根据 mode 更改模板，则需要在您的 "vite.config" 文件中使用条件配置。此插件还允许将变量暴露到模板中，因此，如果唯一区别是 <script src="">，则甚至不必使用两个单独的模板，可以使用如下形式：<script src="<%- REACT_SCRIPT_SOURCE %>">。

- Michal Szajter