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

【问题标题】：How to serve different index.html based on environment using Vite?如何使用 Vite 根据环境提供不同的 index.html？
【发布时间】：2022-01-14 17:46:14
【问题描述】：

在 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'
    })
  ]
})

【问题讨论】：

标签： reactjs webpack plugins frontend vite

【解决方案1】：

您可以使用vite-plugin-html。

基于docs支持设置template文件，方式与HtmlWebpackPlugin相同。

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

编辑：

由于此插件还允许将变量公开到模板中，如果唯一的区别是 <script src="">，您甚至可以不使用两个单独的模板。

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

【讨论】：