Aurelia 路由：当我输入带有路由的 url 时无法加载页面答案

【问题标题】：Aurelia Routing: Unable to load page when I enter the url with routeAurelia 路由：当我输入带有路由的 url 时无法加载页面
【发布时间】：2021-04-11 23:24:40
【问题描述】：

我是 Aurelia 框架的新手，正在使用他们网站上的联系人管理器教程。

当我从默认 url 开始加载页面时：“http://localhost:9002”然后继续到“http://localhost:9002/contacts/2”它工作正常。但是，当我尝试仅使用 URL“http://localhost:9002/contacts/2”加载页面时，它无法加载，然后检查控制台（F12）我可以看到它无法加载几个 .css 和 . js 捆绑包。见下图。我能做些什么？

【问题讨论】：

标签： routes aurelia

【解决方案1】：

为什么会出现错误

出现此错误是因为您的浏览器在“http://localhost:9002/contacts/”而不是“http://localhost:9002/”搜索 .css 和 .js 文件，您的 SPA 提供这些文件来自。

使用 SPA 时，您应该通过在 <head> 元素中添加 <base href="/"> 来明确地将页面的基本 url（通常）设置为 SPA 根，否则您的浏览器只会搜索与当前 url 相关的资源。

做什么

如果您在 Webpack 中使用最新的 aurelia-cli（本回答时为 v2.0.2），您的 index.ejs 文件应包含以下行；

<base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">

从webpack.config.js 文件中的常量中提取其值。

在webpack.config.js更新行

const baseUrl = '';

到

const baseUrl = '/';

之后您的资源应该会正确加载。

进一步阅读

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

【讨论】：