Question

我正在尝试在我的SPA平均堆栈应用程序中为我的客户端提供特定的节点模块。我的app结构如下：

-app /

- index.html的

-node_modules /

-index.js

我希望通过在index.js文件中执行此操作，在前端提供模块angular-simple-sidebar：

'use strict';
let express = require('express');
let routes = require('./api/routes');
let path = require('path');

app.use((req, res, next) => {
  req.start = Date.now();
  next();
});

// ***** THIS IS THE PROBLEM LINE *****
app.use('/scripts', express.static(__dirname + '/node_modules/angular-simple-sidebar'));


app.use(express.static(path.join(__dirname, './app')));
app.use(routes);

app.get('/', (req, res) => {
  res.sendFile('index.html', {
    root: ('./app')
  });
});

/* GET Api index page */
app.get('*', (req, res) => {
  res.send('404 page not found!', 404);
});

app.listen(3000, () => {
  console.log('Express server is listening on port 3000');
});

module.exports = app;

然后在我的index.html文件中使用该路径：

<head>
<script src="scripts/angular-simple-sidebar.min.js"></script>
</head>

然而，我在Chrome控制台中获得的是：

任何帮助都将不胜感激！

Answer 1

我尝试过同样的事情，但它为我工作。

我加载了一个外部CSS文件。

这是我的代码

index.js

// Get the required modules
const express = require('express');


let path = require('path');

const port = process.env.PORT || 8080;

const host = 'localhost';

var app = express();


// For serving static assets

app.use(express.static(path.join(__dirname, '/public')));

app.use('/css', express.static(__dirname + '/css'));

app.get('/', (req, res) => {
  res.sendFile('index.html', {
    root: (__dirname + '/public')
  });
});

// Start Server
app.listen(port, function (){
    console.log(`Server running on http://${host}:${port}`)
});

public / index.html（在您的情况下，这个是app / index.html）

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
    <h1>Hello World</h1>
    </body>
</html>

CSS / style.css中

h1{
    color: red;
}

另外，请尝试删除＆＃39;脚本＆＃39;部分来自提供静态文件并运行。

index.js

// ***** THIS IS THE PROBLEM LINE *****
app.use( express.static(__dirname + '/node_modules/angular-simple-sidebar'));

的index.html

<head>
<script src="angular-simple-sidebar.min.js"></script>
</head>

如果上述操作无法运行，请提供更多详细信息或通过Github共享代码。

Answer 2

只需添加一个前导斜杠

<head>
<script src="/scripts/angular-simple-sidebar.min.js"></script>
</head>

Answer 3

我已经尝试安装相同的模块，它对我的代码工作正常。我可以访问这些文件..这是我的代码

'use strict';
const express = require('express');
const app = express();
app.use('/scripts', express.static(__dirname + '/node_modules/angular-simple-sidebar'));
app.get('/' ,(req, res) => {
    res.send("<script src='scripts/angular-simple-sidebar.min.js'/>");
});

我认为您的路线存在其他问题..您能否在app /文件夹中提供实际app()功能正在运行的代码，以防万一需要更多时间来解决此问题。您可以将静态文件从node_modules移动到public/静态文件夹，如果它们只是静态内容并查看是否有效

使用Express服务node_module

3 个答案: