Невозможно создать проект create-Reaction-app с пользовательским PUBLIC_URL

я пытаюсь

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

с проектом, созданным с использованием последнего скрипта create-реагировать.

Однако вхождения %PUBLIC_URL% в public/index.html заменяются пустой строкой, а не ожидаемым значением PUBLIC_URL.

public/index.html содержит такой код

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

Часы поиска в интернете и показывают, что очень мало написано о PUBLIC_URL. Я клонировал приложение create-реакции-приложение из GitHub и просматривал код, но еще не получил просветления.

У кого-нибудь есть предложения по поводу того, что я делаю не так?

Ответ 1

Если другие ответы не работают для вас, также есть поле homepage в package.json. После запуска npm run build вы должны получить следующее сообщение:

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",

Вы просто добавили бы его как одно из корневых полей в package.json, например.

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

Когда он будет успешно установлен, либо через homepage, либо PUBLIC_URL, вы должны получить сообщение следующего вида:

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

Ответ 2

Это не то, как используется переменная PUBLIC_URL. Согласно документации, вы можете использовать PUBLIC_URL в своем HTML:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Или в вашем 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 - это не то, что вы устанавливаете на выбранное вами значение, это способ хранения файлов в вашем развертывании вне системы сборки Webpack.

Чтобы просмотреть это, запустите приложение CRA и добавьте его в файл src/index.js:

console.log('public url: ', process.env.PUBLIC_URL)

Вы увидите, что URL уже существует.

Читайте больше в документах CRA.

Ответ 3

Люди как я, которые ищут что-то подобное в build:

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

Тогда установка https://dsomething.cloudfront.net на homepage в package.json не будет работать.

1. Быстрое решение

Создайте свой проект так:
(окна)

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

(Linux)

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

(Mac)
-- Точно сказать не могу --

И вы получите

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

в вашем встроенном index.html

2. Постоянное и рекомендуемое решение

Создайте файл с именем .env в корневом .env вашего проекта (там же, где находится package.json).
В этом файле напишите это (без кавычек вокруг URL):

PUBLIC_URL=https://dsomething.cloudfront.net

Создайте свой проект как обычно (npm run build)
Это также сгенерирует index.html с:

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

3. Странное решение

Добавьте это в свой package.json
"homepage": " http://://dsomething.cloudfront.net ",

Затем index.html будет сгенерирован с:

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

Что в основном так же, как:

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

в моем понимании.

Github Выпуск Github Комментарий

Ответ 4

Посмотрите на документацию. У вас может быть файл .env, который подхватывает PUBLIC_URL

Хотя вы должны помнить, что это используется для -

Вы можете использовать эту переменную для принудительной ссылки ресурсов на указанную вами ссылку (включая имя хоста). Это может быть особенно полезно при использовании CDN для размещения вашего приложения.

Ответ 5

На самом деле способ установки переменных среды различен для разных операционных систем.

Windows (cmd.exe)

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

(Примечание: отсутствие пробелов является преднамеренным.)

Linux, macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

Рекомендовать: `cross-env`

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

ref: create-реагировать-app/README.md # добавление-временных-переменных-окружений-в-вашей-оболочке в master · facebookincubator/create-реагировать-app

Ответ 6

Что вы делаете неправильно, так это ожидайте, что PUBLIC_URL и process.env.PUBLIC_URL будут иметь одинаковое значение.

У create-реагировать-приложение есть два различных PUBLIC_URL:

Тот, что находится в рабочей среде или на стартовой странице package.json.
Один в узле process.env.

Среда процесса PUBLIC_URL переопределяет любую домашнюю страницу package.json. Это может быть полный URL со схемой, хостом и путем. Хост будет использоваться для предоставления правильных инструкций по развертыванию.

Process.env.PUBLIC_URL - это только путь из среды процесса PUBLIC_URL или домашней страницы.

Поэтому, когда вы запускаете

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

В React у вас будет

process.env.PUBLIC_URL === ''

Если у тебя есть

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

В React у вас будет

process.env.PUBLIC_URL === '/foo'

Ответ 7

Не уверен, почему вы не можете установить его. В источнике, PUBLIC_URL имеет приоритет над homepage

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

Вы можете попробовать установить точки останова в их коде, чтобы увидеть, какая логика переопределяет переменную среды.

Ответ 8

Как REACT_APP_ здесь, create-response-app будет импортировать только переменные среды, начиная с REACT_APP_, поэтому PUBLIC_URL, как я полагаю, как упомянуто @redbmk, происходит из настройки homepage в файле package.json.

Ответ 9

Эта проблема становится очевидной, когда вы пытаетесь разместить приложение реакции на страницах github.

Как я это исправил,

В моем основном файле приложения, названном app.tsx, где я включаю маршрутизатор. Я установил базовое имя, например, <BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

Обратите внимание, что это относительный URL-адрес, это полностью упрощает возможность локального запуска и размещения. Значение basename соответствует заголовку репозитория на GitHub. Это путь, который страницы GitHub будут автоматически создавать.

Это все, что мне нужно было сделать.

Смотрите рабочий пример, размещенный на страницах GitHub по адресу

https://sean-bradley.github.io/Seans-TypeScript-ReactJS-Redux-Boilerplate/

Ответ 10

Откройте командную строку внутри источника приложения. Запустите команду

Npm Run Eject

Откройте файл scripts/build.js и добавьте его в начало файла после строки "use strict"

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the (current) path which you want to set here.
.....

Запустить

npm run build