1

我正在尝试从基于类型脚本的 KOA 服务器提供前端 Web 应用程序。当我点击完整的 URL 直到（ ）时， index.html（HTML）从公用文件夹中呈现良好。index.htmlhttp://localhost:3000/ui/index.html

但是，如果我只是点击静态 url 的根目录，则该 index.html 引用的本地 js/css 文件不会得到解决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)

包.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. 我已经尝试使用没有“TS 编译”的纯 javascript 测试实现，它工作正常。

  2. index.html试图引用的 JS具有web-componentsjava-script。

    1. 我已经使用 koa-mount 来安装 ui 和 api 。下面是相关代码

    app.use(mount('/api', api)); app.use(mount('/ui', ui)); app.listen(3000,()=>{ console.log("zhun-otu 开始监听端口:3000"); })

我能否获得有关在实现中应该更改哪些内容以使此代码正常工作的指针。

4

0 回答 0