报错如下:
Failed to load resource: the server responded with a status of 404 (Not Found) http://…ake_game/bin/game
我自己排查过,是因为加载的文件没有后缀,正确的加载应该是 game.js ,我只要修改 main.js 就可以了,import { *Game* } from './game';
改成import { *Game* } from './game.js';
可是 main.js 是 main.ts 生成的。请问这个有什么解决方法?
项目目录结构如下:
│ index.html
│ package-lock.json
│ package.json
│ tsconfig.json
├─bin
│ game.js
│ game.js.map
│ main.js
│ main.js.map
│ snake.js
│ snake.js.map
│
└─src
game.ts
main.ts
snake.ts
index.html
<script src="./bin/main.js" type="module"></script>
main.ts
import { Game } from './game';
const game = new Game();
game.start();
game.ts
export class Game {
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"sourceMap": true,
"outDir": "./bin"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
通过配置nginx配置,解决。
server {
listen 80;
# 指定允许跨域的方法,*代表所有
add_header Access-Control-Allow-Methods *;
# 预检命令的缓存,如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
# 带cookie请求需要加上这个字段,并设置为true
add_header Access-Control-Allow-Credentials true;
# 表示允许这个域跨域调用(客户端发送请求的域名和端口)
add_header Access-Control-Allow-Origin $http_origin;
# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;
# OPTIONS预检命令,预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = OPTIONS){
return 200;
}
location / {
root C:/Users/Intel/Desktop/snake_game;
index index.html index.htm;
# 处理 /bin 目录下的请求
location /bin/ {
# 如果请求的路径具有任意后缀名文件,则不进行重写
location ~* \..+$ {
# 指定允许跨域的方法,*代表所有
add_header Access-Control-Allow-Methods *;
# 预检命令的缓存,如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
# 带cookie请求需要加上这个字段,并设置为true
add_header Access-Control-Allow-Credentials true;
# 表示允许这个域跨域调用(客户端发送请求的域名和端口)
# $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号
add_header Access-Control-Allow-Origin $http_origin;
# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;
# OPTIONS预检命令,预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = OPTIONS){
return 200;
}
break;
}
# 如果请求的文件不带后缀名,则增加js,则进行重写
rewrite ^/bin/(.*)$ /bin/$1.js break;
# 如果请求的是不存在的文件,则返回 404 错误
try_files $uri =404;
}
}
}
# 关闭后台执行
daemon off;
```
1
gucheen 2023-05-06 16:36:03 +08:00 1
是 feature 不是 bug ,参见
https://github.com/microsoft/TypeScript/issues/16577 你这个情况可以考虑自己对编译后的文件二次处理,或者在你的服务器上做 rewrite |
2
leokun 2023-05-06 20:07:22 +08:00
用什么工具编译的
|
4
DOLLOR 2023-05-06 21:43:44 +08:00
main.ts 里把
import { Game } from './game'; 改为 import { Game } from './game.js'; |
5
z888888cn OP @gucheen 感谢,我通过 nginx 配置解决了。但是 nginx 配置看着有点懵懵的。nginx 配置如下
``` server { listen 80; # 指定允许跨域的方法,*代表所有 add_header Access-Control-Allow-Methods *; # 预检命令的缓存,如果不缓存每次会发送两次请求 add_header Access-Control-Max-Age 3600; # 带 cookie 请求需要加上这个字段,并设置为 true add_header Access-Control-Allow-Credentials true; # 表示允许这个域跨域调用(客户端发送请求的域名和端口) # $http_origin 动态获取请求客户端请求的域 不用*的原因是带 cookie 的请求不支持*号 add_header Access-Control-Allow-Origin $http_origin; # 表示请求头的字段 动态获取 add_header Access-Control-Allow-Headers $http_access_control_request_headers; # OPTIONS 预检命令,预检命令通过时才发送请求 # 检查请求的类型是不是预检命令 if ($request_method = OPTIONS){ return 200; } location / { root C:/Users/Intel/Desktop/snake_game; index index.html index.htm; # 处理 /bin 目录下的请求 location /bin/ { # 如果请求的路径具有任意后缀名文件,则不进行重写 location ~* \..+$ { # 指定允许跨域的方法,*代表所有 add_header Access-Control-Allow-Methods *; # 预检命令的缓存,如果不缓存每次会发送两次请求 add_header Access-Control-Max-Age 3600; # 带 cookie 请求需要加上这个字段,并设置为 true add_header Access-Control-Allow-Credentials true; # 表示允许这个域跨域调用(客户端发送请求的域名和端口) # $http_origin 动态获取请求客户端请求的域 不用*的原因是带 cookie 的请求不支持*号 add_header Access-Control-Allow-Origin $http_origin; # 表示请求头的字段 动态获取 add_header Access-Control-Allow-Headers $http_access_control_request_headers; # OPTIONS 预检命令,预检命令通过时才发送请求 # 检查请求的类型是不是预检命令 if ($request_method = OPTIONS){ return 200; } break; } # 如果请求的文件不带后缀名,则增加 js ,则进行重写 rewrite ^/bin/(.*)$ /bin/$1.js break; # 如果请求的是不存在的文件,则返回 404 错误 try_files $uri =404; } } } # 关闭后台执行 daemon off; ``` |