我正在嘗試通過 express 構建一個簡單的單頁應用程式。
一切正常，直到我開始創建類，然后瀏覽器拋出以下錯誤：
加載模塊腳本失敗：需要 JavaScript 模塊腳本，但服務器以“text/html”的 MIME 型別回應。每個 HTML 規范對模塊腳本執行嚴格的 MIME 型別檢查。
我希望這express.static()能讓它消失，但事實并非如此。我對 JS、Node 和所有這些還不是很熟練，所以我在這里為任何愚蠢的事情道歉。
目前我的代碼非常簡單：
檔案架構：
-server.js
-[frontend]
-[static]
-index.html
-[js]
-index.js
-[views]
-AbstractView.js
-Home.js
-[node_modules]
-package.json
服務器.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"))
索引.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 "";
}
}
當然，index.html 檔案：
<!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>
希望你能幫我解決這個問題。非常感謝。
_____ 更新
這是 package.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": ""
}
uj5u.com熱心網友回復：
該宣告
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后綴。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/333159.html