时间戳

首页 > 解决方案 > Index.html 不会在嵌套 url 上加载 css 或脚本

reactjs - Index.html 不会在嵌套 url 上加载 css 或脚本

问题描述

我的 React 应用程序的起点是：

本地主机：3000/管理员

所以当我输入网址时：

本地主机：3000/管理员/仪表板/

它工作正常。但是当我写下一个嵌套的 url 时：

本地主机：3000/admin/dashboard/new

index.html 不会加载我的脚本和 css。当我在 index.html 中更改 src url 时./js/admin-app.js，../../js/admin-app.js它可以工作，但在其他 url 上没有更多。

本地主机：3000/admin/dashboard

我试图在 index.html 基础中进行设置，href="./"但它不起作用。

我找不到问题。

我的 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)
    }
  })
});

索引.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>

解决方案
我的应用程序运行在

本地主机：3000/admin/

代替

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

我试试这个

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

它工作得很好

标签： reactjsreact-router

解决方案

我们可以尝试几件事。

设置 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="./" />

推荐阅读