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

Question

在 webpack 中，我使用了 HtmlWebpackPlugin，它可以告诉我要使用哪个 HTML 模板。我想知道如何使用 Vite 达到同样的结果。

目标是在生产（构建）中使用 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'
    })
  ]
})

Answer 1

您可以使用vite-plugin-html。

根据文档，它支持以与HtmlWebpackPlugintemplate相同的方式设置文件。

根据 更改模板mode，您需要在“vite.config”文件中使用条件配置。

编辑：

由于此插件还允许将变量公开到模板中，因此如果唯一的区别是<script src="">.

你可能会使用类似的东西：<script src="<%- REACT_SCRIPT_SOURCE %>">