Node.js nodejs#u express#静态文件（bower#u组件）的路径因'；获取对/user/：id路径的请求'；_Node.js_Twitter Bootstrap_Express_Pug

Node.js nodejs#u express#静态文件（bower#u组件）的路径因'；获取对/user/：id路径的请求'；

node.js twitter-bootstrap express

Node.js nodejs#u express#静态文件（bower#u组件）的路径因'；获取对/user/：id路径的请求'；,node.js,twitter-bootstrap,express,pug,Node.js,Twitter Bootstrap,Express,Pug,问题：我的问题是路由转换将导致静态文件的路径更改。这些是存储在“bower_组件”中的依赖文件这些依赖文件在索引页上运行良好。由于静态文件路径已更改，其他文件无法工作。换句话说，引导无法在“localhost:3000/product/id”上工作，但在“localhost:3000”上工作良好我所做的：我认为这个错误是中间件造成的，因此，我尝试使用“app.use（）”而不是“app.get（）”。不幸的是，出现了更多的错误我的目录系统如下所示： shop -/bower_comp

问题：我的问题是路由转换将导致静态文件的路径更改。这些是存储在“bower_组件”中的依赖文件

这些依赖文件在索引页上运行良好。由于静态文件路径已更改，其他文件无法工作。换句话说，引导无法在“localhost:3000/product/id”上工作，但在“localhost:3000”上工作良好

我所做的：我认为这个错误是中间件造成的，因此，我尝试使用“app.use（）”而不是“app.get（）”。不幸的是，出现了更多的错误

我的目录系统如下所示：

shop
  -/bower_components
      -/bootstrap
      -/jquery
  -/views
      -/includes
         -head.jade
         -header.jade
      -/pages
         -admin.jade
         -detail.jade
         -index.jade
         -list.jade
      -layout.jade
  -app.js

link(href='bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')

script(src='bower_components/jquery/dist/jquery.min.js')

script(src='bower_components/bootstrap/dist/js/bootstrap.min.js')

doctype
  html
   head
      meta(charset='utf-8')
      title #{title}
      include ./includes/head
   body
     include ./includes/header
   block content

extends ../layout

block content
.container
  .row
    .col-xs-12.col-md-7
      img(src='#{product.poster}',alt='#{product.title}',width='720',height='600',align='middle')
    .col-xs-12.col-md-5
      dl.dl-horizontal
        dt  Name
        dd #{product.title}
        dt  Price
        dd #{product.price}
        dt  Production place
        dd #{product.place}
        dt  Description
        dd #{product.description}

我的app.js：

var express = require('express');
var serveStatic = require('serve-static');
var port = process.env.PORT || 3000;
var app = express();
var path = require('path');

app.set('views',path.join(__dirname,'./views/pages'));
app.set('view engine','jade');
app.use('/bower_components',express.static(path.join(__dirname,'bower_components/')));
app.listen(port);
console.log('shop is start on port'+ port);
//index.page
app.get('/',function(req,res){
   res.render('index',{
       title: 'Home',
       productes:[{
         title:'SWISSE',
          _id:1,
        poster:'http://p5.img.ymatou.com/upload/productdes/baee6566fd7545ef8fb0efd94af97a8d.jpg',
    },
    {
        title:'SWISSE',
        _id:3,
        poster:'http://p5.img.ymatou.com/upload/productdes/baee6566fd7545ef8fb0efd94af97a8d.jpg',
    },
    {
        title:'SWISSE',
        _id:2,
        poster:'http://p5.img.ymatou.com/upload/productdes/baee6566fd7545ef8fb0efd94af97a8d.jpg',
    }]
    })
});

//detail.page
app.use('/product/:id',function(req,res){
res.render('detail',{
    title: 'Detail',
    product: {
        title:'swiss',
        poster:'http://www.pharmacyonline.com.au/media/catalog/product/cache/6/image/9df78eab33525d08d6e5fb8d27136e95/3/7/379352.jpg',
        price:'110',
        place:'nz',
        description:'whatever',
    }
})});

我的头看起来像这样：

shop
  -/bower_components
      -/bootstrap
      -/jquery
  -/views
      -/includes
         -head.jade
         -header.jade
      -/pages
         -admin.jade
         -detail.jade
         -index.jade
         -list.jade
      -layout.jade
  -app.js

link(href='bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')

script(src='bower_components/jquery/dist/jquery.min.js')

script(src='bower_components/bootstrap/dist/js/bootstrap.min.js')

doctype
  html
   head
      meta(charset='utf-8')
      title #{title}
      include ./includes/head
   body
     include ./includes/header
   block content

extends ../layout

block content
.container
  .row
    .col-xs-12.col-md-7
      img(src='#{product.poster}',alt='#{product.title}',width='720',height='600',align='middle')
    .col-xs-12.col-md-5
      dl.dl-horizontal
        dt  Name
        dd #{product.title}
        dt  Price
        dd #{product.price}
        dt  Production place
        dd #{product.place}
        dt  Description
        dd #{product.description}

我的布局如下：

shop
  -/bower_components
      -/bootstrap
      -/jquery
  -/views
      -/includes
         -head.jade
         -header.jade
      -/pages
         -admin.jade
         -detail.jade
         -index.jade
         -list.jade
      -layout.jade
  -app.js

link(href='bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')

script(src='bower_components/jquery/dist/jquery.min.js')

script(src='bower_components/bootstrap/dist/js/bootstrap.min.js')

doctype
  html
   head
      meta(charset='utf-8')
      title #{title}
      include ./includes/head
   body
     include ./includes/header
   block content

extends ../layout

block content
.container
  .row
    .col-xs-12.col-md-7
      img(src='#{product.poster}',alt='#{product.title}',width='720',height='600',align='middle')
    .col-xs-12.col-md-5
      dl.dl-horizontal
        dt  Name
        dd #{product.title}
        dt  Price
        dd #{product.price}
        dt  Production place
        dd #{product.place}
        dt  Description
        dd #{product.description}

我的详细信息页面如下所示：

shop
  -/bower_components
      -/bootstrap
      -/jquery
  -/views
      -/includes
         -head.jade
         -header.jade
      -/pages
         -admin.jade
         -detail.jade
         -index.jade
         -list.jade
      -layout.jade
  -app.js

link(href='bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')

script(src='bower_components/jquery/dist/jquery.min.js')

script(src='bower_components/bootstrap/dist/js/bootstrap.min.js')

doctype
  html
   head
      meta(charset='utf-8')
      title #{title}
      include ./includes/head
   body
     include ./includes/header
   block content

extends ../layout

block content
.container
  .row
    .col-xs-12.col-md-7
      img(src='#{product.poster}',alt='#{product.title}',width='720',height='600',align='middle')
    .col-xs-12.col-md-5
      dl.dl-horizontal
        dt  Name
        dd #{product.title}
        dt  Price
        dd #{product.price}
        dt  Production place
        dd #{product.place}
        dt  Description
        dd #{product.description}

请更改js/css文件的路径

link(href='/bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')

script(src='/bower_components/jquery/dist/jquery.min.js')

script(src='/bower_components/bootstrap/dist/js/bootstrap.min.js')

这是因为你使用了相对路径。

如果你投了反对票，请告诉我原因。这样你的否决票可以帮助我下次避免问一个愚蠢的问题。请至少让我知道为什么！但是，如果你认为这是一个愚蠢的问题，那就没关系了。但对我来说，这个问题的答案对我来说至关重要。