c9c21df0f0
解决模块加载错误问题，移除index.html中script的type="module"属性 添加server-config.md详细说明服务器MIME类型配置 优化vite构建配置，添加代码分割和输出格式设置
82 lines
1.7 KiB
Markdown
82 lines
1.7 KiB
Markdown
# 部署服务器配置指南
|
||
|
||
## 问题描述
|
||
|
||
在部署前端项目后，出现以下错误：
|
||
|
||
```
|
||
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "application/octet-stream".
|
||
```
|
||
|
||
## 解决方案
|
||
|
||
此问题是由于服务器未正确配置 JavaScript 文件的 MIME 类型导致的。请按照以下步骤配置您的服务器：
|
||
|
||
### Nginx 配置
|
||
|
||
在 nginx.conf 或站点配置文件中添加：
|
||
|
||
```nginx
|
||
location ~ \.js$ {
|
||
add_header Content-Type application/javascript;
|
||
}
|
||
|
||
# 或者更完整的静态资源配置
|
||
location ~* \.(js|css)$ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
add_header Content-Type $mimetype;
|
||
}
|
||
```
|
||
|
||
### Apache 配置
|
||
|
||
在 `.htaccess` 文件中添加：
|
||
|
||
```apache
|
||
<FilesMatch "\.js$">
|
||
Header set Content-Type "application/javascript"
|
||
</FilesMatch>
|
||
|
||
# 或者在 httpd.conf 中
|
||
AddType application/javascript .js
|
||
```
|
||
|
||
### Caddy 配置
|
||
|
||
在 Caddyfile 中添加：
|
||
|
||
```
|
||
@jsFiles {
|
||
path *.js
|
||
}
|
||
header @jsFiles Content-Type application/javascript
|
||
```
|
||
|
||
### 其他服务器
|
||
|
||
确保您的服务器软件正确配置了以下 MIME 类型：
|
||
|
||
- `.js` 文件: `application/javascript`
|
||
- `.css` 文件: `text/css`
|
||
- `.json` 文件: `application/json`
|
||
|
||
## Vite 构建配置
|
||
|
||
当前项目已配置了适当的代码分割，请使用以下命令构建：
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
或
|
||
|
||
```bash
|
||
npm run build --mode production
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. IIFE 格式会将代码打包成立即执行函数，在某些现代浏览器中可能不需要 `type="module"`
|
||
2. 确保服务器支持静态资源的正确 MIME 类型
|
||
3. 如果使用 CDN，请确保 CDN 也正确配置了 MIME 类型 |