Question

我在解决我的快速服务器上的依赖项时遇到了一些麻烦。

这是我的项目结构

Calculator
--dist
----app
-------calculator.js
-------server.js
--node_modules
--src
----app
--------calculator.js
--------server.js
----public
--------calculator.css
--------calculator.html
----.babelrc
----.gitignore
----package.json

这是我的server.js代码

const express = require('express');
const app = express();
const path = require('path');

app.get('/', (req, res) => {
    res.sendFile(path.resolve('./src/public/calculator.html'));
});

app.use(express.static(__dirname + '../../src/app/public'));
app.use(express.static(__dirname + './'));

app.listen(3000, () => {
    console.log(__dirname);
    console.log("Listening on port 3000");
});

我有一个dist文件夹和一个src文件夹的原因是因为我正在使用Babel将我的JS从ESR从src文件夹编译到app文件夹中的ES5。

但是，当我启动节点服务器时，我的html无法加载css文件和JS文件。我正在使用这些路径分别从calculator.html文件中加载每个

<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>

我确信我遗漏了一些关于在localhost上提供文件的方式。不胜感激指出的错误。

Answer 1

看起来像server.js中的第9行：

app.use(express.static(__dirname + '../../src/app/public'));

您从app文件夹一直到src，一直到根，再回到src，再回到app，然后尝试进入public。但是，根据您的项目结构图，public不在app内，而是在其旁边。您需要的内容更像app.use(express.static(__dirname + '../public'));此外，我建议您使用内置于Node中的path模块。它确保你在路径创建方面没有错误。

编辑：抱歉，这是不正确的。我没有看到你正在转发你的服务器代码。您将要使用这些行，这两行应该同时修复：

app.use(express.static(__dirname + '../../src/public'));
app.use(express.static(__dirname));

这是假设您运行server.js中存在的dist/app文件，而不是src/app中的文件。

Answer 2

尝试其中一个......

app.use（express.static（__ dirname +'/。/ src / app / public'））;

app.use（'/'，express.static（__ dirname）+'/。/ src / app / public'））; // __dirname不包括结尾反斜杠，我想？

第一个将始终显示在静态目录中，第二个将在静态目录中查找“/”及其下方。有关详情，请参阅https://expressjs.com/en/4x/api.html#app.use。

然后......

更改HTML，使src属性为'/calculator.css'等

Answer 3

好吧，这对我有用，虽然我并不是100％确定原因。

我将快速静态文件传递设置为以下

app.use(express.static(__dirname + '/../../src/public'));
app.use(express.static(__dirname));

我的__dirname显示为Calculator/dist/app，因此将HTML文件中的CSS和JS的src属性更改为此工作

<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>

我假设这是有效的，因为我设置了我的快速静态文件夹来查看/src/public文件夹，因为我的当前目录是/dist/app文件夹，我可以直接从那里提供JS文件？

解决快速服务器

3 个答案: