Lo estoy intentando
PUBLIC_URL=http://example.com npm run build
con un proyecto creado con el último script create-react-script.
Sin embargo, las apariciones de %PUBLIC_URL%
en public/index.html
se reemplazan con una cadena vacía, no el valor esperado PUBLIC_URL
.
public/index.html
contiene código como
<script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>
Horas de búsqueda en Internet y el desbordamiento de la pila muestran que se escribe muy poco sobre PUBLIC_URL
. Cloné create-react-app de GitHub y he estado navegando por el código, pero aún no me han aclarado.
¿Alguien tiene alguna sugerencia sobre lo que estoy haciendo mal?
Si las otras respuestas no le funcionan, también hay un campo de homepage
de inicio en package.json
. Después de ejecutar npm run build
, debería recibir un mensaje como el siguiente:
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",
Simplemente lo agregaría como uno de los campos raíz en package.json
, por ejemplo
{ // ... "scripts": { // ... }, "homepage": "https://example.com" }
Cuando se configura correctamente, ya sea a través de la homepage
de inicio o PUBLIC_URL
, debería recibir un mensaje como este:
The project was built assuming it is hosted at https://example.com. You can control this with the homepage field in your package.json.
Gente como yo que está buscando algo como esto en la compilación:
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
Luego, configurar https://dsomething.cloudfront.net
como página de homepage
en package.json
no funcionará.
Construye tu proyecto así:
(ventanas)
set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build
(linux/mac)
PUBLIC_URL=https://dsomething.cloudfront.net npm run build
y obtendrás
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
en su index.html construido
Cree un archivo llamado .env
en la raíz de su proyecto (mismo lugar donde se encuentra el paquete.json).
En este archivo, escriba esto (sin comillas alrededor de la URL):
PUBLIC_URL=https://dsomething.cloudfront.net
Cree su proyecto como de costumbre ( npm run build
)
Esto también generará index.html con:
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
Agregue esto en su paquete.json
"página de inicio": "http://dsomething.cloudfront.net",
Entonces se generará index.html con:
<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">
Que es básicamente lo mismo que:
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
en mi entendimiento.
No es así como se usa la variable PUBLIC_URL. De acuerdo con la documentación , puede usar PUBLIC_URL en su HTML:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
O en tu JavaScript:
render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using `import` for getting asset URLs // as described in “Adding Images and Fonts” above this section. return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; }
PUBLIC_URL no es algo que establezca en un valor de su elección, es una forma de almacenar archivos en su implementación fuera del sistema de compilación de Webpack.
Para ver esto, ejecute su aplicación CRA y agréguelo al archivo src/index.js
:
console.log('public url: ', process.env.PUBLIC_URL)
Verás que la URL ya existe.
Lea más en los documentos de CRA .