我知道这个问题不是第一个,但我不知道在哪里寻找解决方案。 我有一个快速后端服务器。当它启动时,它必须渲染包含 main.js 的 HTML 页面。
app.js代码:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
// <...>
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.set('views', path.resolve(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(cors());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.resolve(__dirname, 'public')));
var listener = app.listen(5000, function(){
console.log('Listening on port ' + listener.address().port);
});
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
public/index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
type="text/css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<title>Fetch Travels</title>
<style>
#play {
display: none;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" id="play">search</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="main.js" type="module"></script>
</body>
</html>
public/main.js 显然是一个客户端脚本,在服务器上找不到,但在本地主机中找到。
改成这样
<script src="/main.js" type="module"></script>
首先您需要遵循正确的文件夹结构:Public 应该位于 src 目录中 而不是这个(你拥有的):
- public
- main.js
- ingex.html
- src
- index.js
...
你必须这样做
- src
- index.js
- public
- main.js
- ingex.html
...
其次,您需要在 src/index.js 中的快速配置中使用这一行,以便让服务器传递额外的文件(不仅仅是 index.html)
app.use("/public/", express.static(__dirname + '/public'));
最后是 html 标签:
<script src="public/main.js"></script>