node.js - 如何使用 Bower 组件文件的正确路径设置 Node 项目

标签 node.js express bower ejs

我正在尝试从这里运行示例应用程序聊天应用程序。 sample chat 我已经安装了所有 Node 模块和 bower 组件。我在命令提示符下运行了所有 3 个项目,没有错误。但我不明白为什么没有找到 bower 组件?我做了一些搜索,但我发现的一些解决方案不起作用。除了 404 错误之外,没有其他错误消息。 相关代码(我相信)。总共 3 个项目,所有项目都包含引用路径的文件 我也在 Windows 10 上工作 聊天主应用程序中的 app.js

var express = require('express'),
 path = require('path'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser');

var routes = require('./routes');

var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', routes.index);

app.set('port', process.env.PORT || 3000);

 var server = app.listen(app.get('port'), function() {
    // log a message to console!
 });

 module.exports = app;

同一项目中的index.ejs

<head>
<title>scotch-chat</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="libs/angular-material/angular-material.css">

<script src="libs/angular/angular.js"></script>
<script src="http://localhost:2015/socket.io/socket.io.js"></script>
<script type="text/javascript" src="libs/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="libs/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="libs/angular-material/angular-material.js"></script>
<script type="text/javascript" src="libs/angular-socket-io/socket.js"></script>
<script type="text/javascript" src="libs/angular-material-icons/angular-material-icons.js"></script>

<script src="js/app.js"></script>

聊天服务器项目 索引.js

//Import all our dependencies
var express = require('express');
var mongoose = require('mongoose');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

//Set our static file directory to public
app.use(express.static(__dirname + 'public'));

//Route for our index file
app.get('/', function(req, res) {
//send the index.html in our public directory
  res.sendfile('index.html');
});

聊天网络应用程序 服务器.js

 var express = require('express'),
 path = require('path'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser');

 var routes = require('./routes');

 var app = express();

 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');

 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));

 app.get('/', routes.index);

 app.set('port', process.env.PORT || 4000);

 var server = app.listen(app.get('port'), function() {
    // log a message to console!
  console.error('Port at 4k');
 });

 module.exports = app;

同一项目中的index.ejs

<head>
<title>scotch-chat</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="libs/angular-material/angular-material.css">
<link rel="stylesheet" href="libs/MaterialDesign/css/materialdesignicons.css">
<script src="libs/angular/angular.js"></script>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script src="http://localhost:2015/socket.io/socket.io.js"></script>
<script type="text/javascript" src="libs/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="libs/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="libs/angular-material/angular-material.js"></script>
<script type="text/javascript" src="libs/angular-socket-io/socket.js"></script>
<script type="text/javascript" src="libs/angular-material-icons/angular-material-icons.js"></script>

<script src="js/app.js"></script>

最佳答案

默认情况下,bower 使用目录 Bower_components,该目录应该位于您的解决方案根文件夹内。可以在 Bower 配置文件 .bowerrc 上覆盖该目录(尝试在解决方案根文件夹中查找它。

我假设您在解决方案根文件夹中运行了 Bower install 命令,因此它必须位于某个位置,否则 Bower install 将在不进行任何更改的情况下关闭。如果您想再次安装它,请使用命令:

bower install --force

请确保您已安装 git(某些软件包和依赖项可能需要)和 Node ,访问解决方案根路径并运行以下命令:

npm install

(假设其中一个包是 Bower)运行:

bower install

如果没有运行:

npm install bower -g (to install globally and so that you can run bower from any folder) then;
npm install bower (to install on your solution) then;
bower install

应安装所有软件包及其依赖项。 更多关于 Bower 包管理器的信息,请引用bower关于.bowerrc和其他选项请参阅bower configuration .

在您提到的存储库上scotch.io ,如果您浏览到 scotch-chat-main-app您将看到存在一个名为 .bowerrc 的文件,检查它您将看到:

{
    "directory" : "app/public/libs",
    "proxy":"http://127.0.0.1:8080",
    "https-proxy":"http://127.0.0.1:8080",
    "strict-ssl"  : false
}

因此,所有 Bower 软件包都将安装在该目录中。 注意:由于您使用的是 Windows 10,因此请确保在具有管理员权限的终端窗口中运行上述所有安装。

如果您在iisnode下运行node/express,则有一些问题..您没有提及它,所以我假设您没有提及,因此,要运行解决方案,只需运行命令:

gulp run

让我知道进展如何。

关于node.js - 如何使用 Bower 组件文件的正确路径设置 Node 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34957985/

相关文章:

javascript - 如何在实时服务器上上传 nodejs 项目或安装 nodejs 和 npm 模块

mysql - 我应该为 Node.js 和 MySQL 使用哪个 ORM?

node.js - 完成中间件文件,以便所有查询参数都经过验证,并且 null 和未定义值会引发错误消息

javascript - 如何检查 Node JS 服务器端代码中是否启用了 javascript

css - 使用 Less 构建 Bootstrap 以更改 @icon-font-path

javascript - 使用 Node 时找不到 Bower 组件

twitter-bootstrap - 将 Bootstrap 与 Bower 一起使用

node.js - 如何在 typescript 中获得与express的Post方法相同的数据类型

javascript - 在递归 promise 中返回的 then() 是什么意思

node.js - CoffeeScript 传递 require() 参数错误