express.js（静态服务器）未加载我的JavaScript

Question

我正在将express.js用作静态服务器，并且代码如下所示：

var express = require('express'),
  app = express();

app
  .use(express.static('./public'))
  .get('*', function (req, res) {
    res.sendfile('public/main.html');
  })
  .listen(3000);

我的文件结构：

.
├── bower_components
│   ├── angular
│   ├── bootstrap
│   └── jquery
├── node_modules
│   └── express
├── public
│   ├── main.html
│   ├── src
│   └── views
└── server.js

我的HTML看起来像这样：

<!DOCTYPE html>
<html ng-app="ContactsApp">
<head lang="en">
  <meta charset="UTF-8">
  <title> Contacts </title>
  <base href="/" />
  <link rel="stylesheet" href="src/bootstrap.min.css"/>

</head>
 <body>    
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../bower_components/angular/angular.min.js"></script>
  <script src="src/app.js"></script>
 </body>
</html>

浏览器未加载角度库，但我收到一个错误Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/bower_components/angular/angular.min.js". ，该Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/bower_components/angular/angular.min.js". 。

我做错了什么？ 我从以前的问题中找不到任何答案。

Answer 1

此行表示您正在从./public提供静态文件

use(express.static('./public'))

因此，只有这棵树才会向公众公开：

   ├── main.html
   ├── src
   └── views

您的bower_components目录不公开，因此不公开。

要解决此问题，可以使用.bowerrc命令在应用程序的根目录中创建一个.bowerrc文件：

{
  "directory": "public/bower_components/"
}

它会告诉bower在安装凉亭的部件public ，而不是默认的bower_components目录。 创建此文件后，只需运行bower install ，别忘了用更新后的路径更新index.html 。

编辑：不要被诱惑改变use(express.static('./public'))通过use(express.static('./'))因为它会很容易地解决您的问题。 它会暴露整个目录结构（和所有文件），并且出于明显的安全原因是不好的：）

express.js（静态服务器）未加载我的JavaScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-20 10:35:34

express.js（静态服务器）未加载我的JavaScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-20 10:35:34

解决方案1
1 已采纳 2015-03-20 10:35:34