我想通过express建立一个简单的单页应用程序。
一切正常，直到我开始创建类，然后浏览器抛出以下错误:
加载模块脚本失败:预期是JavaScript模块脚本，但服务器响应MIME类型为"text/html"严格的MIME类型检查是根据HTML规范对模块脚本强制执行的。
我希望express.static()会让这种情况消失，但事实并非如此。我还不是很精通JS, Node和所有这些，所以我为这里的愚蠢道歉。
我的代码现在很简单:
文件结构:
-server.js
-[frontend]
+-[static]
++-index.html
++-[js]
+++-index.js
+++-[views]
++++-AbstractView.js
++++-Home.js
-[node_modules]
-package.json
server.js
const express = require('express');
const path = require('path');
const App = express()
App.use('/static', express.static(path.resolve(__dirname, 'frontend', 'static')))
App.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, "frontend", "index.html"))
})
App.listen(3000, () => console.log("server running on port 3000"))
index.js:
import Home from "./views/Home"
const navigateTo = url => {
history.pushState(null, null, url)
router()
}
const router = async() => {
const routes = [{
path: '/',
view: new Home()
},
// {
// path: '/projects',
// view: () => console.log('projects')
// },
// {
// path: '/about',
// view: () => console.log('about')
// },
// {
// path: '/studies',
// view: () => console.log('studies')
// },
]
// test routes for matches
const potentialMatches = routes.map(route => {
return {
route: route,
isMatch: location.pathname === route.path
}
})
/**
* NEED TO SET 404 PAGE!
*/
let match = potentialMatches.find(potentialMatch => potentialMatch.isMatch)
if (!match) {
match = {
route: routes[0],
isMatch: true
}
}
const view = new match.route.view()
const content = document.querySelector("#app")
content.innerHTML = await view.getHtml()
console.log(content);
}
window.addEventListener("popstate", router);
document.addEventListener("DOMContentLoaded", () => {
document.body.addEventListener("click", e => {
if (e.target.matches("[data-link")) {
e.preventDefault()
navigateTo(e.target.href)
}
})
router()
})
Home类(扩展和AbstractView通用类):
import AbstractView from "./AbstractView";
export default class Home extends AbstractView {
constructor() {
super()
this.setTitle("Home")
}
setTitle(title) {
document.title = title
}
async getHtml() {
return `<h1>Home</h1>`;
}
}
export default class AbstractView {
constructor() {
}
setTitle(title) {
document.title = title
}
async getHtml() {
return "";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Paolo Iocca</title>
</head>
<body>
<div class="menu" id="menu">
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__line"></span>
</div>
<aside class="aside">
<nav class="nav">
<ul class="nav__list">
<li class="nav__list__item">
<a href="/" class="nav__list__item__link" data-link>home </a>
</li>
<li class="nav__list__item">
<a href="/projects" class="nav__list__item__link" data-link>projects</a
>
</li>
<li class="nav__list__item">
<a href="/about" class="nav__list__item__link" data-link>about </a>
</li>
<li class="nav__list__item">
<a href="/studies" class="nav__list__item__link" data-link>studies
</a>
</li>
</ul>
</nav>
</aside>
<div id="app"></div>
<script type="module" src="/static/js/index.js"></script>
</body>
</html>
希望你能帮我。非常感谢。
___
更新这是包裹。Json文件，以防万一:
{
"dependencies": {
"express": "^4.17.1"
},
"name": "boilerplate-server",
"version": "1.0.0",
"main": "server.js",
"devDependencies": {
"nodemon": "^2.0.14",
"serve-static": "^1.14.1"
},
"scripts": {
"dev": "nodemon server",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
语句
import Home from "./views/Home"
导致请求GET /static/js/views/Home(没有.js后缀)，static中间件无法服务。但是现在下一个中间件接管并响应index.html文件(与Content-Type: text/html)。这就是为什么您看到200 OK状态，但浏览器抱怨错误的内容类型。
express.static(path.resolve(__dirname, 'frontend', 'static'),
{extensions: ["js"]});
您将指示static中间件静默地添加.js后缀。