如何在使用 Express 服务器的 HTML 中加载 JS 文件

Question

我将我的js文件放在公共目录中，并尝试在HTML文件中加载此文件，但是出现了错误。

---

var express=require('express');
var bodyparser=require('body-parser');
var path=require("path");
var multer=require("multer");
console.log(__dirname);
var app=express();
var upload = multer({ dest: __dirname + '/uploads/' });
// app.set('views', __dirname + '/views');
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.static(path.join(__dirname, 'public')));
 app.engine('html', require('ejs').renderFile);
app.get('/',(req,res)=>{
     res.render('some.ejs');
});
app.post('/',upload.single('upl'),(req,res)=>{
    console.log(req.body);
    console.log(req.file);
})
app.listen(3000,()=>{
    console.log("server is up");
})

---

这是我的HTML代码来加载JS：

<script src="/public/web.js"></script>

目录结构

├ public
| └ web.js
├ views
| └ some.ejs
└ server.js

- Ratan

---

请包含错误信息。 - Molda

另外，在按照下面的答案添加express.static之后，您需要更改路径，如下所示<script src="/web.js"></script>，不需要/public部分。 - Molda

Answer 1

为了将文件从服务器传输到客户端，您必须将目录声明为静态目录。

使用express，您可以这样做：

app.use(express.static('PublicDirectoryPath'))

要获取公共目录下的文件， 更新后的代码如下：

现在您的server.js文件应该是：

var express=require('express');
var bodyparser=require('body-parser');
var path=require("path");
var multer=require("multer");
console.log(__dirname);
var app=express();
app.use(express.static('public'));
var upload = multer({ dest: __dirname + '/uploads/' });
// app.set('views', __dirname + '/views');
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.static(path.join(__dirname, 'public')));
 app.engine('html', require('ejs').renderFile);
app.get('/',(req,res)=>{
     res.render('some.ejs');
});
app.post('/',upload.single('upl'),(req,res)=>{
    console.log(req.body);
    console.log(req.file);
})
app.listen(3000,()=>{
    console.log("server is up");
})

请注意，我在第7行将public目录声明为静态目录。 由于您的web3.js直接位于public目录下，在前端中使用：

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

更多信息，请查看文档。

- Shams Nahid

Answer 2

使用Express中的内置中间件函数express.static来提供静态文件，如图片、CSS文件和JavaScript文件。

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

现在您可以提供像js、css和图像这样的静态文件。

- Ropali Munshi