Add documentation for using embedded expressions in index.html

[rdhelms]

Documentation is

• Missing
• Outdated
• Confusing
• Not sure?

Explain in Detail

In the vue-cli documentation, there was a very helpful section about HTML and Static Assets, which specifically provided guidance on using interpolated values AND javascript control expressions in the entry index.html file. This was useful when, for example, conditionally adding third party script tags. The lack of this similar documentation in vite makes it more confusing to migrate Vue 2 projects that used that pattern.
https://cli.vuejs.org/guide/html-and-static-assets.html#the-index-file

Vite does already have an "index.html and Project Root" section...
https://vitejs.dev/guide/#index-html-and-project-root

...and an "HTML Env Replacement" section...
https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

...but neither of these sections address using environment variables AND javascript control expressions in index.html.

The current solution seems to be to use vite-plugin-html, but it's questionable how actively that package is even maintained.

Your Suggestion for Changes

It seems like the "index.html and Project Root" section would be the best place to include guidance for using both environment variables and javascript control expressions within the index.html file.

Reproduction

No response

Steps to reproduce

No response

[bluwy]

...and an "HTML Env Replacement" section... https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

...but neither of these sections address using environment variables in index.html.

I'm confused, https://vitejs.dev/guide/env-and-mode.html#html-env-replacement is exactly about using environment variables in index.html

[rdhelms]

That section is only for reading single variable values from import.meta.env, which does not cover all the existing functionality that was supported in vue-cli. It's not clear, for example, that there's any way to conditionally add a script tag based on an Env variable.

vite-plugin-html provides more functionality, but it's unclear whether that is the recommended solution.

[bluwy]

The docs doesn't exactly need to cover what's mentioned in Vue CLI because it isn't a migration guide. But we can probably add a link to vite-plugin-html if say someone wants to to use expressions. Feel free to send a PR to add that.

[rdhelms]

Thanks @bluwy - I'd be happy to add a link to vite-plugin-html, although part of my reason for posing the question here was that I wasn't sure how actively maintained that package is:
vbenjs/vite-plugin-html#112

I was hoping someone on the vue team might know more about the reliability of that package or else recommend a different way to use the same types of expressions in index.html that we were able to use with vue-cli.

But if vite-plugin-html does still seem like the way to go, then I'd be glad to add a reference to that in the docs 👍

[rdhelms]

@bluwy I also updated the issue's title and description to better reflect the real request here - you're definitely right that it really is more about using embedded expressions than environment variables.

[bluwy]

Good point, I wasn't aware vite-plugin-html isn't actively maintained anymore, that would be hard to suggest in the docs 🤔 Does the plugin still work in Vite 4? If not, maybe we suggest https://github.com/trapcodeio/vite-plugin-ejs instead, otherwise we could suggest both plugins.

I'll ping the other maintainers just in case.

[rdhelms]

Yeah I'm currently trying it out in Vite 4 and it does seem to be working for my use case anyway...I was just concerned by the state of the repo.