解决模块加载错误问题,移除index.html中script的type="module"属性 添加server-config.md详细说明服务器MIME类型配置 优化vite构建配置,添加代码分割和输出格式设置
1.7 KiB
1.7 KiB
部署服务器配置指南
问题描述
在部署前端项目后,出现以下错误:
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 或站点配置文件中添加:
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 文件中添加:
<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 构建配置
当前项目已配置了适当的代码分割,请使用以下命令构建:
npm run build
或
npm run build --mode production
注意事项
- IIFE 格式会将代码打包成立即执行函数,在某些现代浏览器中可能不需要
type="module" - 确保服务器支持静态资源的正确 MIME 类型
- 如果使用 CDN,请确保 CDN 也正确配置了 MIME 类型