Question

我正在使用nodejs和webpack4，我正在尝试将main.js文件链接到index.html。我在网上尝试了所有可能的解决方案它们似乎都不适用于我..我是新手建议欢迎请让我知道我做错了什么。

以下是我所看到的错误日志：

GET http://localhost:3000/dist/main.js net::ERR_ABORTED
localhost/:1
Refused to execute script from 'http://localhost:3000/dist/main.js' 
because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

`public/index.html`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title> 
</head>
<body>

    <form action="/" method="POST" accept-charset="utf-8">
        <input type="email" name="email" placeholder="Email">
        <input type="submit" name="submit">
    </form>

    <script type="text/javascript" src="dist/main.js"> </script>

</body>
</html>

`/app.js`

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

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

app.post('/', function( req ,res){
    res.send("Success");
});

app.listen(3000, function(){
    console.log('Server running on port 3000');
});

文件结构

news_letter //Root directory
|_ dist
|   |_ main.js
|_ public
|   |_ index.html
|_ src
|   |_ index.js
|_ app.js

Answer 1

您需要main.js文件位于公共文件夹中。

看起来您将main.js文件放在dist/文件夹和index.html文件夹中的public/文件夹中。

但您只在app.js文件中将一个目录设置为“静态文件目录”

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

html 中的每个路径都相对于公用文件夹中的路径。因此，将您的dist/文件夹移到public/文件夹中，一切正常

文件结构

news_letter //Root directory
|_ public
|   |_ dist
|   |   |_ main.js
|   |_ index.html
|_ src
|   |_ index.js
|_ app.js

Answer 2

就我而言，我还必须将中间件行更改为：

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

代替：

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

基于documentation的原因是：

但是，您提供给express.static函数的路径是相对于您启动节点进程的目录的。如果您从另一个目录运行Express App，则使用您要提供服务的目录的绝对路径更为安全：

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

因为它的MIME类型（＆＃39; text / html＆＃39;）不可执行，并且启用了严格的MIME类型检查

`public/index.html`

`/app.js`

文件结构

2 个答案:

文件结构