Vite配置base参数构建部署后报Failed to load module script错误怎么解决

问题根因 #

• 路径前缀不匹配：构建时指定的base路径与Nginx对外暴露的访问前缀不一致，导致静态资源请求路径错误，serve -s的单页应用fallback逻辑会将所有不存在的路径请求返回index.html内容，所以JS资源请求返回了HTML，触发MIME类型错误。
• Nginx配置错误：现有配置缺少proxy_pass指令，且代理路径未做前缀处理。

解决方案 #

1. 统一路径前缀

构建时的base参数必须和Nginx的路由前缀完全一致，例如你Nginx用/ideathon-registration/作为访问前缀，就将构建命令修改为：

vite build --base=/ideathon-registration/

如果要保留原构建的/registration-form/前缀，就将Nginx的location规则改为location /registration-form/。

2. 修正Nginx代理配置

将Nginx对应路由配置修改为：

location /ideathon-registration/ {
    proxy_pass http://[HOST]:[PORT]/;
}

注意proxy_pass末尾的*/斜杠/*必须添加，作用是将Nginx匹配到的/ideathon-registration/前缀去掉后再转发给后端的serve服务，保证资源路径匹配。

3. 重启服务生效

# 重新构建项目
vite build --base=/ideathon-registration/
# 重启pm2托管的serve服务
pm2 restart registration-form
# 重载Nginx配置
nginx -s reload

可选优化方案 #

你可以直接用Nginx托管静态资源，去掉中间的serve层，性能更高且减少服务链路，配置参考：

location /ideathon-registration/ {
    alias /你的项目实际路径/dist/;
    try_files $uri $uri/ /ideathon-registration/index.html;
}

配置完成后直接重载Nginx即可，不需要再用pm2运行serve服务。

内容的提问来源于stack exchange，提问作者Abhijit