vbenjs / vite-plugin-html Goto Github PK

View Code? Open in Web Editor NEW

544.0 544.0 92.0 504 KB

A vite plugin for processing html. It is developed based on lodash template

License: MIT License

JavaScript 3.96% TypeScript 85.35% HTML 7.18% Vue 1.66% Shell 1.85%

vite-plugin-html's People

Contributors

Stargazers

Watchers

Forkers

rickytranmer sun79 ygunoil ariesjia xunsukeji szueric trendingtechnology papajia adleader gtx0023 wwwk unknownzjc coderbyheart git1200 chengya666 star212 vueleague misitebao snowkei konpeki622 skymoonya fzlw batje charles-1999 renderz alcasas 1rgs littlegolden joel-chu yanzhangshuai datdoan zxuanhong zhuomingliang ay4toh5i zheng-94 panfei15623 linker-fen-js misaka-0x447f huangjihua koooge jeffcunat pengbouestc vtumi mycupofteaoo thesved maxlangod iuukai didengren tengchongchong screetbloom youthug swrich 1xiyu pricelessnothing vanquish5099 0x1eef cwspear conanxie jsmakshi buptsteve damoncais abbijamal sphinm grabarzundpartner wulawa yiyi-an arunkumar339 sd13142dll draculaprince yongpark thierrymichel vcat-dev madjacky yunchuan123 changweihua chunjuwang zfx0222 gweesin ryomahan renowncoder zkvvv fransmilou qeleb mhornbacher hulh122 599316527

vite-plugin-html's Issues

3.0.3还是有点问题，请看Demo

The latest version (3.0.3) reported an error: Demo

[problem] Injection not working when vite config has root attribute

Hi there and thanks for this plugin.

Just for some context: our page templates are normally served and data-injected by an express.js app. We started to use this plugin so that page templates could also be tested locally in dev environment with a fast turnaround. Instead of actually going through the server, they are served and hot-reloaded by vitejs dev server, and instead of DB data, there are some dummy data injected by this plugin.

In order to have a repro project, we cloned your MPA playground project and made some changes to show the issue. The main changes are to move both HTML files from root folder to src subfolder and then specify root: 'src', in vite.config.ts.

Here's the actual issue description:

Steps to reproduce

Open stackblitz repro project at https://stackblitz.com/edit/vitejs-vite-m4vdfj with Google Chrome or some other browser fully supporting WebContainer (e.g. Firefox would give you errors)
Wait until stackblitz installs and runs the app

What should happen

Page shows its contents, (e.g. hello world from ..., and so on)

What actually happens

Page shows a title is not defined error. It seems like injection is not working correctly

Versions

vite-plugin-html: ^3.2.0
vite: ^2.8.6

ERROR You must supply options.input to rollup

Using [email protected] with [email protected] leads to the following error: ERROR You must supply options.input to rollup.

Removing the plugin from the plugin section fixes the error and makes vite build successfully.

vite v2.8.0 building for production...                                   12:13:03
✓ 0 modules transformed.                                                 12:13:03

 ERROR  You must supply options.input to rollup                          12:13:03


 ERROR  error during build:                                              12:13:03
Error: You must supply options.input to rollup
    at Graph.generateModuleGraph (/Users/erikmuller/detelling/.yarn/cache/rollup-npm-2.67.1-27edb63f67-4320927ae9.zip/node_modules/rollup/dist/shared/rollup.js:22982:19)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Graph.build (/Users/erikmuller/detelling/.yarn/cache/rollup-npm-2.67.1-27edb63f67-4320927ae9.zip/node_modules/rollup/dist/shared/rollup.js:22925:9)
    at async rollupInternal (/Users/erikmuller/detelling/.yarn/cache/rollup-npm-2.67.1-27edb63f67-4320927ae9.zip/node_modules/rollup/dist/shared/rollup.js:23547:9)
    at async doBuild (/Users/erikmuller/detelling/.yarn/__virtual__/vite-virtual-b4106f023d/0/cache/vite-npm-2.8.0-75c8dda402-b6deeab38f.zip/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:39094:24)
    at async build (/Users/erikmuller/detelling/.yarn/__virtual__/vite-virtual-b4106f023d/0/cache/vite-npm-2.8.0-75c8dda402-b6deeab38f.zip/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:38930:16)
    at async CAC.<anonymous> (/Users/erikmuller/detelling/.yarn/__virtual__/vite-virtual-b4106f023d/0/cache/vite-npm-2.8.0-75c8dda402-b6deeab38f.zip/node_modules/vite/dist/node/cli.js:738:9)

// vite.config.ts

export default defineConfig({
  cacheDir: '.vite',
  plugins: [
    react(),
    createHtmlPlugin(),
  ],
  optimizeDeps: {
    include: ['react/jsx-runtime'],
  },
  resolve: {
    alias: {
      '@/': '/src/',
    },
  },
});

vite 升级到 2.8.5 后，在 index.html 定义的 style 样式无法生效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <style>
        .span {
          color: red;
          font-size: 36px;
        }
      </style>
      <div class="span">VITE APP</div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createHtmlPlugin(),
  ],
});

如果移除 createHtmlPlugin 方法，则正常，如果把 vite 退回 2.8.4 ，也正常

support for customized filename

vite-plugin-html cannot choose what the output filename is (like adding hash), which is commonly used in production scenarios.
Hope there could be more functionalities~

能否手动指定html路径

例如我想处理public/index.html

Changelog doesn't communicate breaking changes

It would be helpful for users of this package, if the changelog would be complete.

As you can see, it's unclear which breaking changes caused the bump from 2.x to 3.x. What's the point of keeping a changelog, if it's (apparently) incomplete and people end up going through single commits to see what has changed?

yarn add fails of missing installed packages

I can't install the dependency, due to the missing package is-ci that will be called. Sure I can install it by my own, but maybe it should be a direct dependency of your plugin or it should be somewhere documented that I need to install it too. So I would suggest, that it will be a direct dep in your plugin. IMHO.

Also husky couldn't be found so maybe there is a problem with Windows?

error C:\Projekte\Others\smth\node_modules\vite-plugin-html: Command failed.
Exit code: 1
Command: npm run install:husky
Arguments:
Directory: C:\Projekte\Others\smth\node_modules\vite-plugin-html
Output:
> [email protected] install:husky
> is-ci || husky install

Der Befehl "is-ci" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
Der Befehl "husky" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
npm ERR! code 1
npm ERR! path C:\Projekte\Others\smth\node_modules\vite-plugin-html
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c is-ci || husky install

npm ERR! A complete log of this run can be found in:

Translation: The command is-ci couldn't be found or is wrong. Also for husky

Windows 10 64 bit, latest version.
Node 14.16.0 and NPM 7.5.2

Include ejs file with parameters

I've setup a new Vite project (as vanilla JS project)

Two questions :

How can we include a sub-file like a header.ejs (renamed as .html because .ejs isn't recognized by your plugin like for index.html) ?
Is it possible to pass variables in this included file ?

你好，关于 injectHtml 的tags选项指定注入位置的配置字段？

还请劳烦解答一下，谢谢！

[chore] several 3.x tags missing in repo

Latest versions of package on npmjs are:

[3.2.0]
[3.1.0]
[3.0.6]

but here in repository the latest one is 3.0.6.

Not sure if you'd consider a PR for this, or if that's "too much".

HTH

多页面模式下不同页面的template有办法用同一个html吗

CORS header

I'm using this plugin (version 3.1.0) with the following configuration:

createHtmlPlugin({
  minify: true,
  entry: 'src/index.jsx',
  template: 'public/index.html',
})

When it's enabled, I receive the following headers:

When it is disabled, I receive these:

I think that this is a plugin's bug: Access-Control-Allow-Origin should be always returned when server.cors is enabled.

What do you think? Is it normal?

Unable to use different filenames for `template` and `filename` in MPA config

When the template file and the filename do not match the plugin fails to build anything (bails out with an error).

It would be great to be able to specify the same template file, with different entry points to generate multiple pages that have the same initial html structure with different JS bundles.

Consola wraps EVERY log

Right now after importing/requiring this package, every console.log is wrapped with unnecessary log type. You should consider using it only inside logs in plugin.

Description on how to use playground does not yield a working example

Changing into the playground directory and running yarn serve does not work. One reason being that it probably should read yarn dev, because there is no serve script. But running yarn dev throws a ton of errors...

Can you please check and provide a better step-by-step instruction on how to use the playground? Thank you!

Dev server fails to start when EJS is used in index.html

I have the same issue described there by @yurique
He already created an example repo to reproduce

git clone [email protected]:yurique/vite-html-plugin-bug.git
cd vite-html-plugin-bug
yarn
yarn dev

No support for files in directories

I have the following (different) files and 'pages' config:

index.html
about/index.html

pages: [
  { filename: "index.html", template: "index.html" },
  { filename: "about/index.html", template: "about/index.html" },
],

The vite-plugin-html generates the same content for the both files, as in "index.html".

I think, the root of the problem is here — this regexp cuts off all directories and only returns the file base name, which is the same for these files.

`minify: false` 不生效

👴🏻配置了minify:false然而index.html依然会压缩成一行，拜读源码后发现minifyHtml里似乎只判断了是否为boolean，但是没有判断是否为true或false，从而导致minify一定会执行
不知👴🏻的猜测是否有迹可循，如果不对，还烦请指正

ERROR [vite:resolve] id.startsWith is not a function

这样配置运行会出错

import { defineConfig } from "vite";
import { babel } from "@rollup/plugin-babel";
import { resolve } from "path";
const root = resolve(__dirname, "src");
import { createHtmlPlugin } from "vite-plugin-html";
export default defineConfig({
    esbuild: { drop: ["console", "debugger"] },
    root,
    plugins: [
        babel({
            exclude: [/node_modules/],
            babelHelpers: "bundled",
            configFile: resolve(__dirname, "babel.config.js"),
            extensions: [".ts", ".js"],
        }),
        createHtmlPlugin({
            minify: {
                removeAttributeQuotes: false,
                collapseWhitespace: true,
            },
         }),
    ].flat(),
    build: {
        minify: "terser",
        terserOptions: {
            compress: { drop_console: true, drop_debugger: true },
        },
        target: "es2015",
        rollupOptions: {
            plugins: [
               
            ].flat(),

            input: [
                resolve(root, "index.html"),
                resolve(root, "hieroglyphy-encoder.html"),
                resolve(
                    root,
                    "JSFuck---Write-any-JavaScript-with-6-Characters_-[]()!+.html"
                ),
                // resolve(root, "JSfuck-Decoder--and-hieroglyphy--decoder.html"),
            ],
        },
    },
});

错误的输出

vite build


vite v2.9.1 building for production...                                                                                       10:12:58
✓ 0 modules transformed.                                                                                                     10:12:59  

 ERROR  [vite:resolve] id.startsWith is not a function                                                                       10:12:59  


 ERROR  error during build:                                                                                                  10:12:59  
TypeError: id.startsWith is not a function
    at Object.resolveId (C:\Documents\GitHub\JSfuck-and-hieroglyphy-Decoder-and-ENCODER\node_modules\vite\dist\node\chunks\dep-611778e0.js:37781:20)
    at C:\Documents\GitHub\JSfuck-and-hieroglyphy-Decoder-and-ENCODER\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:22810:37

这样配置可以正常运行

import { defineConfig } from "vite";
import { babel } from "@rollup/plugin-babel";
import { resolve } from "path";
const root = resolve(__dirname, "src");
import { createHtmlPlugin } from "vite-plugin-html";
export default defineConfig({
    esbuild: { drop: ["console", "debugger"] },
    root,
    plugins: [
        babel({
            exclude: [/node_modules/],
            babelHelpers: "bundled",
            configFile: resolve(__dirname, "babel.config.js"),
            extensions: [".ts", ".js"],
        }),
        // createHtmlPlugin({
        //     minify: {
        //         removeAttributeQuotes: false,
        //         collapseWhitespace: true,
        //     },
        // }),
    ].flat(),
    build: {
        minify: "terser",
        terserOptions: {
            compress: { drop_console: true, drop_debugger: true },
        },
        target: "es2015",
        rollupOptions: {
            plugins: [
                createHtmlPlugin({
                    minify: {
                        removeAttributeQuotes: false,
                        collapseWhitespace: true,
                    },
                }),
            ].flat(),

            input: [
                resolve(root, "index.html"),
                resolve(root, "hieroglyphy-encoder.html"),
                resolve(
                    root,
                    "JSFuck---Write-any-JavaScript-with-6-Characters_-[]()!+.html"
                ),
                // resolve(root, "JSfuck-Decoder--and-hieroglyphy--decoder.html"),
            ],
        },
    },
});

正常的输出

vite build


vite v2.9.1 building for production...                                                                        10:11:47
✓ 18 modules transformed.                                                                                     10:11:48

 WARN  warnings when minifying css:                                                                           10:11:48
▲ [WARNING] The "-" operator only works if there is whitespace on both sides

    <stdin>:85:20:
      85 │     width: calc(100%-40px);
         ╵                     ^



dist/JSFuck---Write-any-JavaScript-with-6-Characters_-[]()!+.html                  2.62 KiB                   10:11:49
dist/hieroglyphy-encoder.html                                                      2.44 KiB                   10:11:49
dist/index.html                                                                    2.56 KiB                   10:11:49
dist/assets/index.f1fe29ed.js                                                      2.16 KiB / gzip: 0.70 KiB  10:11:49
dist/assets/hieroglyphy-encoder.fd267c08.js                                        0.57 KiB / gzip: 0.34 KiB  10:11:49
dist/assets/JSFuck---Write-any-JavaScript-with-6-Characters_-__()!_.94f8ec31.js    0.54 KiB / gzip: 0.33 KiB  10:11:49
dist/assets/myfontandtextalign.0151629b.js                                         0.69 KiB / gzip: 0.39 KiB  10:11:49
dist/assets/hieroglyphy.acd64757.js                                                2.28 KiB / gzip: 0.79 KiB  10:11:49
dist/assets/jsfuck.0f418e9e.js                                                     3.70 KiB / gzip: 1.58 KiB  10:11:49
dist/assets/JSFuck---Write-any-JavaScript-with-6-Characters_-__()!_.19da34d4.css   0.28 KiB / gzip: 0.21 KiB  10:11:49
dist/assets/myfontandtextalign.0b7bedcc.css                                        0.17 KiB / gzip: 0.16 KiB  10:11:49
dist/assets/hieroglyphy-encoder.b117f5cb.css                                       1.38 KiB / gzip: 0.53 KiB  10:11:49
dist/assets/index.57c7e7b5.css

版本信息

 node -v  v16.14.2

 "vite": "^2.9.1",

        "vite-plugin-html": "^3.2.0"

The latest version (3.0.2) reported an error

The latest version (3.0.2) reported an error: Demo

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig((command) => {
    const isBuild = Boolean(command.mode === 'production');
    return {
        base: '/zlt9_erp/',
        plugins: [
            vue(),
            createHtmlPlugin({
                minify: true,
                inject: {
                    data: {
                        APP_TITLE: '标题',
                        APP_AUTHOR: '作者',
                        APP_KEYWORDS: 'AAA,BBB',
                    },
                },
            }),
        ],

        server: {
            open: true,
            host: '0.0.0.0',
            strictPort: false,
            cors: true,
        },
    };
});

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <meta content="<%- APP_KEYWORDS %>" name="keywords" />
        <link rel="icon" href="/assets/img/favicon.ico" />
        <meta content="<%- APP_AUTHOR %>" name="author" />
        <link href="/assets/css/loading.css" rel="stylesheet" />
        <title><%- APP_TITLE %></title>
    </head>
    <body>
        <div id="app">
            <div class="first-loading-wrp">
                <div class="loading-wrp">
                    <span class="dot dot-spin">
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </div>
                <div>
                    <h2>欢迎使用 —— <%- APP_TITLE %></h2>
                </div>
            </div>
        </div>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>

如果有注入CSS的话，Minify会失效

比如在examples/src/App.vue里加入 CSS 样式再vite build，Vite 对于 CSS 的注入会晚于pre的钩子。

我建议把template和minify拆成两个插件导出，你觉得 OK 的话我可以发个 PR。

Duplicate extend for plugin:@typescript-eslint/recommended

Provide a default template?

In the past when using https://github.com/jantimon/html-webpack-plugin I would normally not have an index.html file defined at all and just rely on the plugin to create it for me. This meant the only interesting thing about the template at all is the path to my js entrypoint.

Would you be open to adding some functionality like this that provides a very basic default template if none is defined?

can i output html to disk when i use dev server

just lisk alwaysWriteToDisk in htmlWebpackPlugin

执行 pnpm add -D vite-plugin-html 时报错

WARN Package name mismatch found while reading {"integrity":"sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==","registry":"https://registry.npmjs.org/","tarball":"https://registry.npmjs.org//filelist/-/FileList-1.0.2.tgz"} from the store. This means that the lockfile is broken. Expected package: [email protected]. Actual package in the store by the given integrity: [email protected].

按照demo配置后，运行失败，提示 html = await server.transformIndexHtml?.(url, html, req.originalUrl); 异常

目前安装的vite-plugin-html版本3.0.5

Version 3 breaks vite proxy

In version v2.7.13 all worked fine, after upgrading to v3 (3.0.6) vite server proxy settings do work anymore if accessed directly via browser. Lets say I have in my vite config:

server: {
	proxy: {
		'/api': 'http://localhost:3000'
	},
}

calling localhost:8000/api/list directly from my browser always serves index.html only async XHR calls after initial load goes through the proxy.

where is changelog of 3.1.0 ?

关于重构

Hello，我是上次在 vite-plugin-html 里面提 issue 的，我看到你的修复了，但我还是觉得应该重构，原因主要有下面几点：

1、用户可能只需要 minify 或者 template 这两个功能中的其一，但目前的方式是默认导出两个 plugin，Vite 会把这两个 plugin 都放到 rollup 里面，这在大型项目里面可能是个性能负担。我认为可以重构成导出两个函数，用户按需引入就好。
2、目前提供的tags和viteHtmlPluginOptions实际上是一种功能，我认为有点类似 Vue 模板和 h 函数的关系。为了避免心智负担，保留最简单的用法也就是模板即可。
3、模板功能目前使用的是lodash，我认为ejs提供的功能更强大而且更轻量（1.4M size + 12W dependents vs 134K size + 8K dependents）。

我目前基本重构好了，如果你觉得OK我可以发PR。

breaking change

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import { minifyHtml, injectHtml } from '../src/index';

export default defineConfig({
  plugins: [
    vue(),
    minifyHtml(),
    injectHtml({
      title: 'vite-plugin-html-example',
      injectScript: '<script src="./inject.js"></script>'
    })
  ]
})

// index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%= title %>
  </title>
</head>

<body>
  <div id="app"></div>
  <%- injectScript %>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

3.0.4有问题，对于注入script标签方式在vue项目中开发时无法运行，会提示报错语法错误

错误截图

vue中html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>
    <%- injectScript %>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

去掉‘ <%- injectScript %>’后正常，即：<%- title %>能正常渲染
个人觉得编译后<%- injectScript %>会生成对于的代码，，但是vite开发时无法生成，不知道为啥3.0没有了tag的支持(或者有能否提供下案例)

怎么获取vue中.env文件变量？

在多页面模式下有 page.filename === 'index.html' 将会变为单页模式

这条indexPage的规则在最后一条，而且会匹配所有的pathname，导致无论路径是什么都会请求到indexPage

vite2中，首次安装库，在 html 写入 <%- injectScript %> 后，加载文件会出现 408 连接超时

vite2中，首次安装库，在 html 写入 <%- injectScript %> 后，加载文件会出现 408 连接超时，是因为什么呢？注释掉后，不会出现

希望：

createHtmlPlugin({
minify: true,
entry: '/src/main.ts',
inject: {
// Inject data into ejs template
data: {
title: VITE_SYSTEM_NAME,
injectScript: <script src="./config/api.config.js"></script>
},
},
})

Html is injected into body, since version 3

Hi,

when updating to any latest version 3.. coming from 2.1.2 the html generates correctly but is written into the body part of the html and is not replaceing it. But in version 2.1.2 it works just fine.

My files:
viteconfig.js

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import bundleVisualizer from 'rollup-plugin-visualizer';
import { VitePWA } from 'vite-plugin-pwa';
import tsconfigPaths from 'vite-tsconfig-paths';
import { createHtmlPlugin } from 'vite-plugin-html';
import envCompatible from 'vite-plugin-env-compatible';
import path from 'path';

const ENV_PREFIX = 'VITE_';

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

  return defineConfig({
    resolve: {
      alias: {
        '@/': `${path.resolve(__dirname, 'src')}/`,
        '@lib/': `${path.resolve(__dirname, 'src/lib')}/`,
        '@pages/': `${path.resolve(__dirname, 'src/pages')}/`,
        '@utils/': `${path.resolve(__dirname, 'src/utils')}/`,
        '@components/': `${path.resolve(__dirname, 'src/components')}/`,
        '@models/': `${path.resolve(__dirname, 'src/models')}/`,
        '@hooks/': `${path.resolve(__dirname, 'src/hooks')}/`,
        '@services/': `${path.resolve(__dirname, 'src/services')}/`,
      },
    },
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
    build: {
      emptyOutDir: true,
      sourcemap: process.env.SOURCE_MAP === 'true',
    },
    css: { preprocessorOptions: { scss: { charset: false } } },
    plugins: [
      react(),
      envCompatible({ prefix: ENV_PREFIX }),
      createHtmlPlugin({
        inject: {
          data: {
            TITLE: process.env.VITE_DMAIN_APP_NAME,
          },
        },
      }),
      tsconfigPaths(),
      VitePWA(...),
      bundleVisualizer(...),
    ],
  });
};

My index.html

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <base href="/" />

  <title>
    <%- TITLE %>
  </title>
  <meta name="description" content="D-Main Wissensmanagement-Applikation">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="apple-mobile-web-app-title" content="D-Main">
  <meta name="application-name" content="D-Main">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#000000">
  <meta name="google" content="notranslate">
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
</body>

</html>

The result :

I disabled all other extra config settings besides the react one and it still happens.
What am I doing wrong?

node版本12 不支持ES可选链"?."和"??"等语法

Sveltekit + SSR + minify html

Does this plugin allow me to minify HTML for server side rendered pages?

Is there an example?

Thanks

feat: Add option to minify inline JS

Would it be possible to add an option to minify inline JS?

Looks like the library used (html-minifier-terser) supports a "minifyJS" option.

和vite-plugin-inspect插件一起使用会导致vite-plugin-inspect无效

问题

和vite-plugin-inspect插件一起使用会导致vite-plugin-inspect无效，访问 http://localhost:3000/__inspect/ 会变空白，去掉 vite-plugin-html 配置，能正常访问

期望解决方案

配置 vite-plugin-inspect 了插件，http://localhost:3000/__inspect/ 也能正常访问

Cannot destructure property 'VITE_GLOB_APP_TITLE' of 't' as it is undefined.

version：3.0.6

description：vben-admin 执行打包命令后，浏览器运行控制台报错，页面空白，资源加载正常，降低到2.x版本正常

Cannot destructure property 'VITE_GLOB_APP_TITLE' of 't' as it is undefined.

其他依赖：

    "vite": "^2.8.3",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "^3.0.6",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-purge-icons": "^0.7.0",
    "vite-plugin-style-import": "^1.4.1",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-theme": "^0.8.1",
    "vite-plugin-vue-setup-extend": "^0.4.0",

Minifier removes CSP hashes from @vite/plugin-legacy

By adding enabling the minifier the CSP hashes set by @vite/plugin-legacy are being removed.

Issue seems te go away by setting minifyJS to false, though this results in hydration issues as far as I've tested.

Repo with issue can be found at Git Repo. Is a clone of Playground SSR Vue with slight changes to show the issue.

Headers are added in server.js via Helmet.

To reproduce:

Download repo
Run npm install
Run npm run build
Run npm run serve -> See console for issue
Change minifyJs: true to minifyJs: false in vite.config.js
Repeat step 3 and 4

多页面不能访问？只能显示入口页index.html

Can support multiple pages

entry src/**/*.html, only index.html minified.

Please list the optional values of the `injectTo` parameter in detail in the documentation.

How to inject tags with v3?

Hi,

I was using this plugin to inject tags like this:

 if (command === "build") {
    merge(config, {
      plugins: [
        ...config.plugins,
        injectHtml({
          tags: [
            { attrs: { href: "/manifest.json", rel: "manifest" }, injectTo: "head", tag: "link" },
          ],
        }),
        minifyHtml(),
      ],
    })
  }

Is there a way to do this with v3? My problem is that I cannot npx vite on a templated HTML file...

Build failed using nodejs v12.22.1

Hello, after updating the package to v3.0.6, i've realised that vite build using node v12.22.1 failed with this error message:

/home/gitlab-runner/builds/f-zTB-5a/0/ispp/arm-school-front-end/node_modules/vite-plugin-html/dist/index.cjs:139
          html = await server.transformIndexHtml?.(url, html, req.originalUrl);
                                                 ^
SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:[86](ispp/arm-school-front-end/-/jobs/99103#L86)3:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:8[87](ispp/arm-school-front-end/-/jobs/99103#L87):19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/gitlab-runner/builds/f-zTB-5a/0/ispp/arm-school-front-end/vite.config.ts:38:20)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.require.extensions.<computed> [as .ts] (/home/gitlab-runner/builds/f-zTB-5a/0/ispp/arm-school-front-end/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:71344:20)

TypeError: (0 , import_vite_plugin_html.default) is not a function

升级后报错

TypeError: (0 , import_vite_plugin_html.default) is not a function

Multiple entry points

Hi, it seems this plugin only accepts a single options object, but I need to pass a different set of options (fields) to different templates, as I have multiple entry points (html files) that need to be processed. How would I do that, if possible at all?

多入口的路由规则是怎样的

Vue3+Vite，按照readme配置了index.html和app.html两个入口之后，访问localhost:3000/app.html依然显示index.html的内容，所以应该如何访问多个入口？