我正在尝试使用 Netlify CLI 部署我制作的网站(使用 Vite、Typescript 创建的 React 应用程序),但在部署后,我检查了应用程序未加载的 URL,它只是显示 Module from '...main.js 。 tsx' 由于不允许的 MIME 类型(“application/octet-stream”)而被阻止。 那么html页面中这个script标签的类型应该是什么?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href=".">
<link rel="shortcut icon" href="#">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Anta&family=Assistant:wght@400;600&family=BIZ+UDPMincho&family=Black+Han+Sans&family=Dela+Gothic+One&family=East+Sea+Dokdo&family=Hina+Mincho&family=Jua&family=Klee+One&family=Luckiest+Guy&family=Nanum+Brush+Script&family=Nanum+Gothic&family=Nanum+Gothic+Coding:wght@400;700&family=Qwigley&family=Rammetto+One&family=Reggae+One&family=Roboto:wght@300&family=RocknRoll+One&family=Rowdies&family=Rubik+Glitch&family=Rubik+Marker+Hatch&family=Source+Code+Pro:wght@200;400;600;900&family=Squada+One&family=Teko:[email protected]&display=swap"
rel="stylesheet">
<title>Manga Shop</title>
</head>
<body>
<div id="root"></div>
<script type="module" src='/src/main.tsx'></script>
</body>
</html>
我尝试将类型更改为“text/javascript”,但也不起作用。我尝试完全删除该类型,但仍然不起作用。
出现此问题是因为您尝试使用 type="module" 加载 .tsx 文件。但是,浏览器只能理解 JavaScript,不能理解 TypeScript,因此您需要在提供服务之前将 TypeScript 文件编译为 JavaScript。
由于您的 React 应用程序是使用 Vite 创建的,因此请确保在部署之前构建项目。
要构建应用程序,请运行:
npm run build
# or
yarn build
Vite会在dist文件夹中生成一个index.html文件,其中相应的脚本标签指向编译后的JavaScript文件。
脚本标签看起来像这样:
<script type="module" src="/assets/main.[hash].js"></script>