Обслуживание интерфейсного веб-приложения с сервера KOA на основе типового скрипта не может разрешить файлы CSS и JS
Я пытаюсь обслуживать интерфейсное веб-приложение с сервера KOA на основе типового скрипта. Вindex.html
(HTML) отлично отображается из общей папки, когда я нажимаю полный URL-адрес до index.html
(http://localhost:3000/ui/index.html
).
однако локальные файлы js / css, на которые ссылается этот index.html, не разрешаются, если я просто попал в корень статического URL-адреса, т.е. http://localhost:3000/ui
и в этом случае я получаю ошибку ниже..
ОШИБКА НА ВЕБ-КОНСОЛИ:
GET http://localhost:3000/styles/style.css net::ERR_ABORTED 404 (Not Found)
ui:14 GET http://localhost:3000/scripts/zhun/zhn-nav-toolbar/zhn-nav-toolbar.js net::ERR_ABORTED 404 (Not Found)
ui:15 GET http://localhost:3000/scripts/zhun/zhn-nav-button/zhn-nav-button.js net::ERR_ABORTED 404 (Not Found)
ui:14 GET http://localhost:3000/scripts/zhun/zhn-nav-toolbar/zhn-nav-toolbar.js net::ERR_ABORTED 404 (Not Found)
ui:15 GET http://localhost:3000/scripts/zhun/zhn-nav-button/zhn-nav-button.js net::ERR_ABORTED 404 (Not Found)
Package.json
"dependencies": {
"@types/winston": "^2.4.4",
"koa": "^2.12.0",
"koa-mount": "^4.0.0",
"koa-router": "^9.0.1",
"koa-static": "^5.0.0"
},
"devDependencies": {
"@types/koa": "^2.11.3",
"@types/koa-mount": "^4.0.0",
"@types/koa-router": "^7.4.1",
"@types/koa-static": "^4.0.1",
"rollup": "^2.15.0"
}
структура проекта
root/-
+ src/
| +public/
| +index.html
| +scripts/
| + subfolders and js files
| +styles/
| + style.css
|+ server.ts
index.html ссылки на файлы
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/zhun/zhn-nav-toolbar/zhn-nav-toolbar.js" type="module" ></script>
<script src="scripts/zhun/zhn-nav-button/zhn-nav-button.js" type="module" ></script>
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es2017",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true,
"allowJs":true
},
"include": [
"./src/**/*"
]
}
Несколько указаний о проведенных мною тестах:
- Я уже пробовал протестировать реализацию с использованием простого javascript без "компиляции TS", и она отлично работает.
JS, что
index.html
пытается сослатьсяweb-components
java-скрипт.- Я использовал koa-mount для монтирования как ui, так и api. ниже соответствующий код
app.use (монтировать ('/api', api)); app.use(mount('/ui', ui)); app.listen(3000,()=>{ console.log("zhun-otu начал прослушивать порт:3000 "); })
Могу ли я получить указатели на то, что нужно изменить в реализации, чтобы этот код работал.