index.html — vite Source File

Source Code

<h1>Environment Variables</h1>
<p>import.meta.env.BASE_URL: <code class="base"></code></p>
<p>import.meta.env.MODE: <code class="mode"></code></p>
<p>import.meta.env.DEV: <code class="dev"></code></p>
<p>import.meta.env.PROD: <code class="prod"></code></p>
<p>import.meta.env.VITE_CUSTOM_ENV_VARIABLE: <code class="custom"></code></p>
<p>
  ${import.meta.env.VITE_CUSTOM_ENV_VARIABLE}:
  <code class="custom-template-literal-exp"></code>
</p>
<p>
  import.meta.env.CUSTOM_PREFIX_ENV_VARIABLE:
  <code class="custom-prefix"></code>
</p>
<p>
  import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME: <code class="mode-file"></code>
</p>
<p>import.meta.env.VITE_INLINE: <code class="inline"></code></p>
<p>typeof import.meta.env.VITE_BOOL: <code class="bool"></code></p>
<p>typeof import.meta.env.VITE_NUMBER: <code class="number"></code></p>
<p>typeof import.meta.env.VITE_STRING: <code class="string"></code></p>
<p>
  typeof import.meta.env.VITE_STRINGIFY_OBJECT:
  <code class="stringify-object"></code>
</p>
<p>process.env.NODE_ENV: <code class="node-env"></code></p>
<p>global.process.env.NODE_ENV: <code class="global-node-env"></code></p>
<p>
  globalThis.process.env.NODE_ENV: <code class="global-this-node-env"></code>
</p>
<p>import.meta.env.VITE_EXPAND_A: <code class="expand-a"></code></p>
<p>import.meta.env.VITE_EXPAND_B: <code class="expand-b"></code></p>
<p>import.meta.env.SSR: <code class="ssr"></code></p>
<p>import.meta.env: <span class="pre env-object"></span></p>
<p>
  ${import.meta.env}:
  <span class="pre env-object-in-template-literal-exp"></span>
</p>
<p>import.meta.url: <span class="pre url"></span></p>
<p>
  import.meta.env. <code class="ignores-literal-import-meta-env-dot"></code>
</p>
<p>import.meta.env <code class="ignores-literal-import-meta-env"></code></p>

<script type="module">
  text('.base', import.meta.env.BASE_URL)
  text('.mode', import.meta.env.MODE)
  text('.dev', import.meta.env.DEV)
  text('.prod', import.meta.env.PROD)
  text('.custom', import.meta.env.VITE_CUSTOM_ENV_VARIABLE)
  text(
    '.custom-template-literal-exp',
    `${import.meta.env.VITE_CUSTOM_ENV_VARIABLE}`,
  )
  text('.custom-prefix', import.meta.env.CUSTOM_PREFIX_ENV_VARIABLE)
  text('.mode-file', import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME)
  text('.inline', import.meta.env.VITE_INLINE)
  text('.bool', typeof import.meta.env.VITE_BOOL)
  text('.number', typeof import.meta.env.VITE_NUMBER)
  text('.string', typeof import.meta.env.VITE_STRING)
  text('.stringify-object', typeof import.meta.env.VITE_STRINGIFY_OBJECT)
  text('.ssr', import.meta.env.SSR)
  text('.node-env', process.env.NODE_ENV)
  text('.global-node-env', global.process.env.NODE_ENV)
  text('.global-this-node-env', globalThis.process.env.NODE_ENV)
  text('.env-object', JSON.stringify(import.meta.env, null, 2))
  text(
    '.env-object-in-template-literal-exp',
    `${JSON.stringify(import.meta.env, null, 2)}`,
  )
  text('.ignores-literal-import-meta-env-dot', 'import' + '.meta.env.')
  text('.ignores-literal-import-meta-env', 'import' + '.meta.env')
  text('.expand-a', import.meta.env.VITE_EXPAND_A)
  text('.expand-b', import.meta.env.VITE_EXPAND_B)

  function text(el, text) {
    document.querySelector(el).textContent = text
  }
</script>
<script type="module" src="./index.js"></script>

<style>
  .pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
  }
</style>