Is it possible to use env variables inside a .html file (public path) but not the index.html one i have tried and it works fine in index.html but in any other .html file it doesn't work, for example if write this in img src:
<img src="<%= VUE_APP_API_Base %>/Image" border="0" style="width: 468px; height:60px;">
It doesn't parse anything from the .env files and src is written as it is instead of using the value of env variable. When visiting that html page url encode error is thrown in console.
Structure of my directory is:
public
|-- index.html
`-- sub-folder
`-- sub.html <<<=== This is the file where I want to use .env variable
EDIT: To clarify about duplicate, I am asking specifically how to include a variable from .env file in a non-root html file (index.html), the duplicate asks about using multiple html files with webpack which is a different scenario
Link to Vue.js docs explaining the solution for this problem
The global BASE_URL and NODE_ENV actually works fine but not anything from my .env files.