I have a Vite + Vue 3 application that uses a Netlify function as an API endpoint so the easiest way to serve them both locally is the Netlify CLI, specifically netlify dev.
When netlify dev is run, it announce that it is injecting the variables from the .env file.
◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ Injected .env file env var: VITE_API_URL
◈ Loaded function api (http://localhost:8888/.netlify/functions/api).
◈ Functions server is listening on 41127
◈ Starting Netlify Dev with Vite
The problem is, because this variable is injected into the Netlify runtime environment, Vite considers it a system variable and won’t overwrite it from .env.local or any other .env files.
The feature request I submitted went through a little while ago. You can now configure your netlify.toml to include an envFiles array under the [dev] heading.
The order the files are loaded is highest to lowest. So in the example above the variables in .env.netlify.local would take priority over the ones .env.netlify if there is a conflict.