reactjs - 如何使用 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 .

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

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

编辑:

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

您可以使用类似:<script src="<%- REACT_SCRIPT_SOURCE %>">