vite variables de entorno y patrones

Variable ambiental

Vite expone las variables de entorno en un import.meta.env objeto especial. Aquí hay algunas variables integradas que se pueden usar en todos los casos:

import.meta.env.MODE: {string} El modo en que se ejecuta la aplicación .
import.meta.env.BASE_URL: {string} La URL base al implementar la aplicación. Está determinado por el elemento de configuración base .
import.meta.env.PROD: {booleano} Si la aplicación se ejecuta en el entorno de producción.
import.meta.env.DEV: {booleano} Si la aplicación se está ejecutando en el entorno de desarrollo (siempre al import.meta.env.PRODcontrario).
import.meta.env.SSR: {booleano} Si la aplicación se ejecuta en el servidor .

Sustitución del entorno de producción

En producción, estas variables de entorno se reemplazan estáticamente en el momento de la compilación , por lo tanto, use cadenas completamente estáticas cuando haga referencia a ellas. Las claves dinámicas no surtirán efecto. Por ejemplo, los valores de clave dinámica import.meta.env[key] no son válidos.

También reemplazará las cadenas que aparecen en las plantillas de JavaScript y Vue. Esto debería ser muy raro, pero podría haberse hecho accidentalmente. En este caso, puede ver errores como Missing Semicolon o etc., por ejemplo, cuando se reemplaza con . Hay algunas formas de evitar este problema:Unexpected token"process.env.NODE_ENV"""development": "

Para las cadenas de JavaScript, puede usar espacios Unicode de ancho cero para dividir la cadena, por ejemplo: 'import.meta\u200b.env.MODE'.
Para las plantillas de Vue u otro HTML compilado en cadenas de JavaScript, puede usar la etiqueta <wbr> , por ejemplo: import.meta.<wbr>env.MODE.

`.env` documento

Vite usa dotenv para cargar variables de entorno adicionales desde los siguientes archivos en su directorio de entorno :

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

Prioridad de carga del entorno:

Un archivo para especificar patrones (por ejemplo .env.production, ) tendrá prioridad sobre los formularios genéricos (por ejemplo, .env).

Además, las variables de entorno que ya existen cuando se ejecuta Vite tienen la máxima prioridad y .env los archivos de clase no las sobrescribirán. Por ejemplo al ejecutar VITE_SOME_KEY=123 vite build .

.env Los archivos de clase se cargarán al comienzo del inicio de Vite y los cambios surtirán efecto después de reiniciar el servidor.

Las variables de entorno cargadas también se import.meta.env exponen al código fuente del cliente como cadenas.

Para evitar la filtración accidental de algunas variables de entorno al cliente, solo las variables VITE_ con se expondrán al código procesado por vite. Por ejemplo, las siguientes variables de entorno:

VITE_SOME_KEY=123
DB_PASSWORD=foobar

Solo VITE_SOME_KEY se expondrá como import.meta.env.VITE_SOME_KEY código fuente proporcionado al cliente, pero DB_PASSWORD no.

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

Además, Vite usa dotenv-expand para expandir las variables directamente. Para obtener más información sobre la sintaxis, consulte su documentación .

Tenga en cuenta que si desea utilizar un símbolo en una variable de entorno $ , debe \ escapar con

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

Si desea personalizar el prefijo de las variables env, consulte envPrefix .

Precauciones de seguridad

.env.*.local Los archivos deben ser locales y pueden contener variables confidenciales. Debe .local agregar al suyo .gitignore para evitar que git los registre.
Dado que cualquier variable expuesta al código fuente de Vite eventualmente aparecerá en el paquete del cliente, VITE_* la variable no debe contener información confidencial.

Intellisense para TypeScript

De forma predeterminada, Vite proporciona definiciones de tipo en vite/client.d.ts . import.meta.envA medida que .env[mode] personaliza más y más variables de entorno en sus archivos, es posible que desee obtener inteligencia de TypeScript VITE_ para variables de entorno definidas por el usuario con el prefijo .

Para hacer esto, puede src crear un env.d.ts archivo en el directorio y luego agregar la definición de la siguiente manera ImportMetaEnv :

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

Si su código depende del tipo de entorno del navegador, como DOM y WebWorker , puede tsconfig.json modificar el campo lib para obtener compatibilidad con el tipo.

{
  "lib": ["WebWorker"]
}

Sustitución de variables de entorno HTML

Vite también admite la sustitución de variables de entorno en archivos HTML. Cualquier atributo puede usarse en archivos HTML import.meta.env con una sintaxis especial :%ENV_NAME%

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

Si la variable de entorno import.meta.env no existe, por ejemplo, no existe %NON_EXISTENT%, se ignorará y no se reemplazará, lo que es import.meta.env.NON_EXISTENT diferente de JS, que se reemplazará con undefined.

modelo

De forma predeterminada, el servidor de desarrollo ( dev comando) se ejecuta en development modo (desarrollo) y build el comando se ejecuta en production modo (producción).

Esto quiere decir que al ejecutarse vite build automáticamente carga .env.production variables de entorno que puedan existir en:

# .env.production
VITE_APP_TITLE=My App

En su aplicación, puede usar import.meta.env.VITE_APP_TITLE encabezados de representación.

En algunos casos, puede anular el modo predeterminado utilizado por el comando vite build al pasar un indicador de opción si desea representar títulos diferentes cuando se ejecuta en un modo diferente . --modePor ejemplo, si desea compilar su aplicación en modo de ensayo (prelanzamiento):

vite build --mode staging

También necesita crear un nuevo .env.staging archivo:

# .env.staging
VITE_APP_TITLE=My App (staging)

Dado que el valor predeterminado ejecuta compilaciones en modo de producción, también puede cambiar esto para ejecutar compilaciones en modo de desarrollo vite build utilizando un modo diferente y la configuración de archivo correspondiente :.env

# .env.testing
NODE_ENV=development