JS模块/导入错误与节点和ejs

Question

我有问题链接/导入我的javascript文件在我的节点项目。我试图链接到一个公共javascript地图从我的ejs-文件。到目前为止，在我的项目中，我已经完成了在ejs/html- script标签中的代码中编写javascript，但它似乎无法导入。因为我想从不同的。js文件中导入，我发现自己很挣扎。

来自app.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));```

这是来自我的taskboard. js:

<script src="/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js" type="module">
</script>
<script>
import KanbanAPI from "/public/javascript/api/kanbanAPI.js"
console.log(KanbanAPI.getItems(1));
</script>

下面是我的文件结构:输入图片描述

我已经仔细检查了链接(即/public/javascript..)通过点击+c(打开它)在Visual Studio Code中工作，所以它不是(../)或(./)的问题。

我在浏览器(Firefox)上得到的错误:

GEThttp://localhost:3000/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js
[HTTP/1.1 404 Not Found 3ms]
Loading module from “http://localhost:3000/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js” was blocked because of a disallowed MIME type (“text/html”).
Uncaught SyntaxError: import declarations may only appear at top level of a module

当我跳过type="module"在script标签中，我也不能在浏览器中链接它。在这两种情况下，它都会抛出404 Not Found。我读过type="module"作为一种避免浏览器误读文档类型的方法，但它似乎在两种情况下都不起作用。如果我像这样在src中添加(../):

<script src="../public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js">

也没有找到，这让我相信可能路由有问题(?)这是我目前的地图结构:输入图片描述

我在app.js中也有这个:

app.use((req, res, next) => {
res.locals.path = req.path;
next();
});

这是kanbanAPI.js的顶部代码:

export default class KanbanAPI {
static getItems(columnId){
const kanbanColumn = read().find(column => column.id == columnId);
if (!column){
return [];
}
}
}

Answer 1

当您使用静态文件夹名称时，这意味着它将查看该文件夹的内部，这意味着您在查找文件时不需要写入public，而只需写入文件夹内的路径

<script type="module">
import KanbanAPI from "/javascript/api/kanbanAPI.js"
</script>