vite-plugin-monkey导致vite-plugin-html不生效

[mouday]

无法注入变量到html模板

import { createHtmlPlugin } from "vite-plugin-html";

createHtmlPlugin({
        template: "public/index.html",
        inject: {
          data: {
            APP_NAME: env.VITE_APP_NAME,
            VERSION: version,
          },
        },
      }),

[mouday]

单独使用vite-plugin-html是可以的，我修改了html和monkey的插件顺序，也无法生效

[lisonge]

什么项目需要同时用到 vite-plugin-monkey 和 vite-plugin-html

[mouday]

我需要为插件生成一个下载页面，方便公司内部人员安装，内部使用，所以不能公开到插件市场

[mouday]

我的完整配置

vite.config.js

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import monkey, { cdn } from "vite-plugin-monkey";
import path from "path";
import { version } from "./package.json";
import { createHtmlPlugin } from "vite-plugin-html";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    version,
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    build: {
      minify: true,
    },
    plugins: [
      react(),

      monkey({
        entry: "src/main.js",
        userscript: {
          name: env.VITE_APP_NAME,
          icon: "https://vitejs.dev/logo.svg",
          namespace: "npm/vite-plugin-monkey",
          match: [
            "*://www.baidu.com/*"
          ],

        }
      }),

      createHtmlPlugin({
        template: "public/index.html",
        inject: {
          data: {
            APP_NAME: env.VITE_APP_NAME,
            VERSION: version,
          },
        },
      }),
    ],
  };
});

依赖

{

  "devDependencies": {
    "@types/react": "^18.2.18",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.4",
    "vite": "^4.4.8",
    "vite-plugin-html": "^3.2.2",
    "vite-plugin-monkey": "^3.4.0"
  },
}

[lisonge]

我需要为插件生成一个下载页面

那你应该用另外一个 vite 项目去生成这个预览下载站

而不是简单的把 createHtmlPlugin 直接放到 plugins 里面去

或者简单地新增一个 vite.preview.config.ts 在这里面去构建你的预览站点

[mouday]

是个好办法，感谢大佬提供思路