web-dev-qa-db-fra.com

créer-réagir-app construire avec PUBLIC_URL

J'essaie 

PUBLIC_URL=http://xxxx.com npm run build

avec un projet construit en utilisant le dernier script create-react-script.

Toutefois, les occurrences de% PUBLIC_URL% dans public/index.html sont remplacées par une chaîne vide et non par la valeur attendue PUBLIC_URL.

public/index.html contient du code comme

   <script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>

Les heures de recherche sur Internet et le débordement de pile montrent qu'il est très peu écrit sur PUBLIC_URL. J'ai cloné create-react-app à partir de git hub et j'ai parcouru le code, mais je n'ai pas encore été éclairé.

Quelqu'un at-il des suggestions quant à ce que je fais mal?

create-react-app
24
Gulliver Smith

Si les autres réponses ne vous conviennent pas, il existe également un champ homepage dans package.json. Après avoir exécuté npm run build, vous devriez recevoir un message du type suivant:

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

Vous n'aurez qu'à l'ajouter en tant que l'un des champs racine dans package.json, par exemple.

{
  // ...
  "scripts": {
    // ...
  },
  "homepage": "https://example.com"
}

Une fois qu'il a été défini avec succès, via homepage ou PUBLIC_URL, vous devriez plutôt recevoir un message comme celui-ci:

The project was built assuming it is hosted at https://example.com.
You can control this with the homepage field in your package.json.
24
redbmk

Regardez la documentation . Vous pouvez avoir un fichier .env qui récupère le PUBLIC_URL

Bien que vous deviez vous rappeler que ce qui sert à - 

Vous pouvez utiliser cette variable pour forcer les actifs à être référencés textuellement dans l'url que vous fournissez (nom d'hôte inclus). Cela peut être particulièrement utile lorsque vous utilisez un CDN pour héberger votre application.

5
Dave

En réalité, la manière de définir les variables d'environnement diffère d'un système d'exploitation à l'autre.

Windows (cmd.exe)

set PUBLIC_URL=http://xxxx.com&&npm start

(Remarque: le manque d'espace est intentionnel.)

Linux, macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

Recommander: cross-env

{
  "scripts": {
    "build": "cross-env PUBLIC_URL=http://xxxx.com npm start"
  }
}

ref: create-react-app/README.md # ajout-temporaire-environnement-variables-dans-votre-shell chez maître · facebookincubator/create-react-app

3
JimmyLv

Les gens comme moi qui cherchent quelque chose comme ça dans la construction: 

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Puis définir https://dsomething.cloudfront.net à homepage dans package.json ne fonctionnera pas.

1. Solution rapide

Construisez votre projet comme ceci:
(les fenêtres)

set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build`

(linux) 

PUBLIC_URL=https://dsomething.cloudfront.net npm run build

(Mac)
-- pas certain -- 

Et vous aurez

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

dans votre index.html construit

2. Solution permanente et recommandée

Créez un fichier appelé .env à la racine de votre projet (même emplacement que package.json).
Dans ce fichier, écrivez ceci (sans guillemets autour de l’URL):

PUBLIC_URL=https://dsomething.cloudfront.net

Construisez votre projet comme d'habitude (npm run build)
Cela générera également index.html avec: 

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

3. Solution étrange

Ajoutez ceci dans votre package.json
"homepage": " http: //: //dsomething.cloudfront.net ",

Ensuite, index.html sera généré avec:

<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Ce qui est fondamentalement le même que:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

d'après ce que je comprends. 

Problème GithubCommentaire Github

3
Vaibhav Vishal

Ce que vous faites mal, c'est d'espérer que PUBLIC_URL et process.env.PUBLIC_URL auront la même valeur.

create-react-app a deux PUBLIC_URL différents:

  1. Celui de la page d’environnement de processus ou de package.json.
  2. Celui du noeud process.env.

L'environnement de processus PUBLIC_URL remplace toute page d'accueil package.json. Il peut s'agir d'une URL complète avec schéma, hôte et chemin. L'hôte serait utilisé pour donner les instructions de déploiement correctes.

Process.env.PUBLIC_URL est uniquement le chemin de l'environnement de processus PUBLIC_URL ou de la page d'accueil.

Par conséquent, lorsque vous exécutez

PUBLIC_URL=http://example.com npm run build

En réaction, vous aurez

process.env.PUBLIC_URL === ''

Si tu avais

PUBLIC_URL=http://example.com/foo npm run build

En réaction tu aurais

process.env.PUBLIC_URL === '/foo'
0
Marko Kohtala

Vous ne savez pas pourquoi vous ne pouvez pas le définir. Dans source , PUBLIC_URL a priorité sur homepage

const envPublicUrl = process.env.PUBLIC_URL;
...
const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;

Vous pouvez essayer de définir des points d'arrêt dans leur code pour voir quelle logique redéfinit votre variable d'environnement.

0
dosentmatter

Comme documenté ici create-react-app importera uniquement les variables d'environnement commençant par REACT_APP_; le PUBLIC_URL, comme je l'ai mentionné par @redbmk, vient donc du paramètre homepage du fichier package.json.

0
TobyG