Обслуживание интерфейсного веб-приложения с сервера 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/**/*"
    ]
}

Несколько указаний о проведенных мною тестах:

  1. Я уже пробовал протестировать реализацию с использованием простого javascript без "компиляции TS", и она отлично работает.
  2. JS, что index.html пытается сослаться web-components java-скрипт.

    1. Я использовал koa-mount для монтирования как ui, так и api. ниже соответствующий код

    app.use (монтировать ('/api', api)); app.use(mount('/ui', ui)); app.listen(3000,()=>{ console.log("zhun-otu начал прослушивать порт:3000 "); })

Могу ли я получить указатели на то, что нужно изменить в реализации, чтобы этот код работал.

0 ответов

Другие вопросы по тегам