Проект react-router-dom прерывается из-за publicPath при связывании с webpack

Я работаю над проектом с React-router-dom.

в моем веб-пакете я установил:

output: {
    filename: 'app.js',
        path: path.join(__dirname, 'dist'),
        publicPath: '/'
},
devServer: {
    historyApiFallback: true
}...

Мне нужно, чтобы publicPath было "/", чтобы маршруты работали (если я не ошибаюсь)

Когда я запускаю проект с webpack-dev-server --inline --hot --process, все работает нормально.

Но когда я пытаюсь собрать и связать его, я получаю эту ошибку:

index.html:11 ПОЛУЧИТЬ файл:///C:/app.js net::ERR_FILE_NOT_FOUND

Знаете ли вы, как правильно настроить его, чтобы сборка работала нормально, поскольку проект отлично работает с webpack-dev-server?


webpack reactjs javascript react-router-dom
person ueeieiie    schedule 26.12.2017    source источник
comment
Как вы обслуживаете свое приложение после того, как создали его? Сервер, который будет обслуживать приложение, должен знать о маршрутизации клиентов. Можете ли вы попробовать локальный веб-сервер и обслуживать свое приложение из папки сборки с помощью ws --spa index.html?   -  person margaretkru    schedule 29.12.2017
comment
@margaretkru Я пытался запустить его вообще без сервера, просто открыв свой index.html, зачем мне сервер? я не могу просто запустить статически?   -  person ueeieiie    schedule 29.12.2017
comment
на самом деле это сработает, но я предполагаю, что вам нужно изменить пути в html с /app.js на ./app.js, чтобы загрузить файл в тот же каталог, что и html, а не в корень текущей сети, затем включите Разрешить доступ к URL-адресам файлов в Расширения Chrome, описанные здесь. Но маршруты реагирования больше не будут работать, если вы обслуживаете приложение из file:///.   -  person margaretkru    schedule 30.12.2017
comment
Кстати, вы используете HashRouter или BrowserRouter? в соответствии с этим ответом SO ваши маршруты будут работать, если вы обслуживаете из файловой системы и используете HashRouter, в противном случае вам нужно настроить веб- сервер.   -  person margaretkru    schedule 30.12.2017
comment
@margaretkru правда, правда :) я использую HashRouter   -  person ueeieiie    schedule 30.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Итак, начнем, как запустить приложение реакции из file:///.

  1. Изменить webpack конфигурацию раздела output, сделав publicPath: './', например, если index.html и связанные файлы находятся в одном каталоге:

    entry: ...
output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].js',
    publicPath: './'
}

Это позволит загружать связанные файлы в тот же каталог, что и html, а не в корень текущей сети (как это было бы в случае publicPath: '/').

  1. При тестировании в Chrome включите «Разрешить доступ к URL-адресам файлов» в расширениях Chrome, как описано здесь.
  2. При использовании маршрутизации используйте HashRouter вместо BrowserRouter (касается react-router v4). См. этот ответ SO для получения дополнительной информации об этом.
person margaretkru    schedule 30.12.2017