Início / coding / Perguntas / 77714583
Accepted
xpt
Asked: 2023-12-26 02:06:19 +0800 CST

Como usar a variável de ambiente como título do aplicativo react vite

  • 772

Como usar a variável de ambiente como título do aplicativo react vite?

Uma solução que encontrei é, no index.tsxarquivo:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Set document title dynamically
document.title = import.meta.env.REACT_APP_MY_VARIABLE || 'Default Title';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

No entanto, ao usar qualquer valor em

export REACT_APP_MY_VARIABLE=whatever

Eu sempre acabei com 'Default Title'.

Seguindo Create React App: usando variáveis ​​de ambiente em index.html , mudei o acima para process.env:

document.title = process.env.REACT_APP_MY_VARIABLE || 'Default Title';

mas agora meu aplicativo react mostra apenas uma página vazia.

PS.

Este é um aplicativo react vite e estou começando com:

npx vite --host

PPS.

A solução deve funcionar tanto para o tempo de desenvolvimento/teste quanto para o tempo de construção.

javascript

1 respostas

  1. Best Answer

    Para que variáveis ​​de ambiente personalizadas sejam expostas no Vite, elas precisam ser prefixadas com VITE_: https://vitejs.dev/guide/env-and-mode .

    Você provavelmente deseja usar import.meta.env.VITE_APP_TITLEe definir a VITE_APP_TITLEvariável.

    • 1

relate perguntas