Question

我正在构建一个单页Web应用程序，其中Ember.js或Backbone.js作为前端MVC，express.js（node.js）作为后端服务器。

server / app.js 代码简而言之

app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, '..', 'client')));
app.get('*', function(req, res) {
  return res.render('base'); (will sendFile (client/index.html) )
});

它将使用所有公共资源加载 client / 文件夹，客户端文件夹结构如下所示

- client
   -- index.html ( will be rendered as always )
   -- app (front end mvc code)
   -- assets
      -- images
      -- styles

当前端MVC启用html5 pushstate 时，快速服务器也始终为所有匹配的路由提供服务，这反过来会在刷新页面或手动设置url时呈现index.html插入浏览器。

client / index.html （示例代码）

<link rel="stylesheet" href="assets/styles/reset.css">
<link rel="stylesheet" href="assets/styles/base.css">

以下是三种不同的网址案例

localhost:3000/        (root)
localhost:3000/users  || localhost:3000/#/users (hard url)
localhost:3000/users/1    || localhost:3000/#/users/1  ( dynamic segment)

当我将任何静态资源定义为相对路径时，它会在页面刷新时使用根URL和硬URL匹配路径，它将资源作为

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms

但是当我到达localhost:3000/users/1并刷新页面时，我得到了错误的资源网址，因此加载client/index.html时失败，因为该路径中没有资源。

GET /users/assets/styles/reset.css 304 2ms
GET /users/assets/styles/base.css 304 6ms

然后我切换到绝对路径 client / index.html （示例代码）

<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/base.css">

即使在动态网段网址localhost:3000/users/1中也能正常运行，所有资源都在正确的网址路径中提供。但我在前端mvc模板中有一个html img标记<img src="assets/images/icons/star.png" alt="star">，它将在应用程序启动时呈现。当我在页面刷新时加载localhost:3000/users/1时，这就是我得到的内容

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms
GET /users/assets/images/icons/star.png 304 5ms

我尝试使用前端mvc模板（<img src="/assets/images/icons/star.png" alt="star">）中的绝对路径和相对路径，无论如何都加载users前缀。

我找到了tbranyen的解决方案，但它并不适合我。我根本不需要设置任何集群，我想要的是我的快速服务器在匹配任何动态段时提供没有任何前缀的任何资源。所以我编写了这个中间件，它触发正确但仍然加载带有users/前缀的静态资源。

// this route uses the ":user" named parameter
// which will cause the 'user' param callback to be triggered
router.get('/users/:user_id', function(req, res, next) {
  console.log('req.params: ', req.params.user_id );
  //console.log('@TODO: need to handle the params here');
  //next();
  return res.render('base');
});

问题：

当使用Express.js作为服务器时，我希望每个浏览器请求都将使用响应client/index.html进行处理，即使使用动态查询段也是如此。目前，每当url查询涉及动态查询段/users/:user_id时，来自快速服务器的响应将以users为前缀添加到所有静态资源。

例如，当我使用动态细分localhost:3000/users/1加载网址时。如果我在把手模板中有资源assets/images/icons/star.png，请表示服务器回复/users/assets/images/icons/star.png，但我没有资产的users文件夹。我想要回复/assets/images/icons/star.png。

我尝试使用句柄模板中的绝对路径/assets/images/icons/star.png或相对路径assets/images/icons/star.png，它总是在响应中返回users前缀。

感谢您的帮助！

Answer 1

在基本模板的<head>中，将其添加到顶部：

<base href="/">

Express节点作为pushState启用服务器工作，提供任何静态资源，没有任何路径前缀

1 个答案: