0

一个多月以来，我一直在寻找解决方案。

我已经使用parcel-bundlerand构建了一个个人登录页面preact。我也preact-router用来处理我的路由。

这是一些代码。

主要应用组件

class App extends Component {
  render(props) {
    return (
      <div id='main'>
      {/* Components outside of router persist
      throughout all pages */}
        <Header />
        <Nav tabs={tabs} />

        <Router>
          <About  default path='/about'   />
          <Skills path='/skills'  />
          <Books  path='/books'   />
        </Router>
      </div>
    )
  }
}

导航组件

const Nav = ({ tabs }) => 
  <nav>
    {tabs.map(t => (
        <p>
          <Link activeClassName='active' href={ t.path }>{ t.title.toUpperCase() }</Link>
        </p>
      ))}
  </nav>

选项卡.json

[
  {
    "title": "About",
    "path": "/about" 
  },
  {
    "title": "Skills",
    "path": "/skills" 
  },
  {
    "title": "Books",
    "path": "/books"
  }
]

因此，每当我使用 parcel 的服务器实时运行页面时，一切都会按预期工作：我单击一个选项卡，然后呈现相应的页面/组件。

但是，每当我运行时parcel build blah blah，打开我的index.html并单击任何选项卡，我都会得到以下https://i.imgur.com/71ogrFA.png（单击选项卡时浏览器窗口的屏幕截图），以及浏览器更改为file:///C:/{route_name}.

我试图理解为什么当我在 parcel 的实时服务器上运行我的页面时它可以工作，以及为什么它在构建后不起作用？看起来，在构建之后，单击任何选项卡会导致浏览器在文件系统中搜索页面？是这种情况吗？最终，我该如何解决这个问题？

4

1 回答 1

0

URL 中的前导斜杠使它们绝对是根。

如果站点是通过 HTTP 传输的，则根是域：<a href="/bar">放置在 URLhttp://example.com/foo/bar指向的站点上http://example.com/bar。

但是，如果您在浏览器中从 PC 打开文件时使用的文件协议，根目录是当前驱动器的根文件夹，通常是C:. 因此，如果您在本地打开相同的文件file:///C:/some/path/foo/bar，链接将指向file:///C:/bar.

最重要的是，这意味着这个错误只在本地开发过程中出现。一旦您的网站托管在实际服务器上，它就不会发生。

您可以使用 XAMPP 或 MAMP 等工具运行本地 HTTP 服务器，以确保链接在部署之前有效。

Parcel 开发服务器也在运行本地 HTTP 服务器，这就是链接在那里正常工作的原因。

于 2018-05-29T16:48:38.113 回答