Index.html не загружает CSS или скрипт на вложенный URL - PullRequest
Новая
       5

Index.html не загружает CSS или скрипт на вложенный URL

0 голосов
/ 28 октября 2018

Начальная точка моего приложения React:

локальный: 3000 / Admin

Итак, когда я набираю в URL, это:

localhost: 3000 / admin / dashboard /

Всё работает хорошо. Но когда я пишу следующий вложенный URL:

localhost: 3000 / admin / панель инструментов / новый

index.html не загружает мой скрипт и css. Когда я изменяю в index.html URL-адрес src с ./js/admin-app.js на ../../js/admin-app.js, он работает, но не более на других URL-адресах.

Localhost: 3000 / администратор / панель

Я попытался установить в index.html базу href="./", но она не работает.

Я не могу найти проблему.

my server.js: 

app.use('/admin', express.static(path.join(__dirname, 'admin/server/static/')));
app.use('/', express.static(path.join(__dirname, 'server/static/')));

app.get('/admin/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'admin/server/static/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
});

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'server/static/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
});

Index.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <base href="./" />
    <title>AdminPage</title>
    <link rel="stylesheet" href="css/admin_style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
   <div id="admin-app"></div>
   <script src="js/admin_app.js"></script>
  </body>
</html>

Решение
Мое приложение работает на

Localhost: 3000 / администратор /

вместо 

 src="js/admin_app.js" or src="./js/admin_app.js"

я пробую это 

 src="/admin/js/admin_app.js"

и работает отлично

1 Ответ

0 голосов
/ 28 октября 2018

Есть пара вещей, которые мы можем попробовать.

При настройке index.html оставьте файл относительно базового URL.

Таким образом, вместо: 

<script src="js/admin_app.js"></script>

используйте: 

<script src="/js/admin_app.js"></script>

Это означает, что браузер всегда будет искать файл в URL-адресе относительно базового приложения, например: 

http://localhost/js/admin_app.js

или что-то вроде: 

http://myurl.com/js/admin_app.js

Так чтоadmin_app.js файл ДОЛЖЕН быть в этой папке (js).В вашем случае, у вас есть статическая структура папок, подобная этой: 

server/static

, поэтому файл должен находиться в: 

server/static/js/admin_app.js

Это потому, что на вашем сервере вы маршрутизируете всезапросы к / в папку server/static/.

По сути, вы должны указать правильный файл, используя структуру вашей папки.У вас также есть папка с именем admin, поэтому, если файлы находятся в admin/server/static, то относительный URL должен быть: 

<script src="/admin/js/admin_app.js"></script>

Итак, все зависит от того, где именно файлы находятся в структуре вашей папки..

Сделайте то же самое для css: 

<link rel="stylesheet" href="/css/admin_style.css">

или 

<link rel="stylesheet" href="/admin/css/admin_style.css">

Удалите это из вашего index.html file (вам это не нужно): 

<base href="./" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...