Vue3+Vite2项目构建后部署至AWS EC2经Nginx运行访问报错

以下是同类场景的高频根因与对应解决步骤，按排查优先级排序：

一、先定位错误具体特征 #

打开浏览器开发者工具「网络」面板，找到加载失败的静态资源（以js、css文件为主），核对请求的三个核心信息：

• 若返回状态码为404：属于资源路径配置错误
• 若返回状态码为200但响应内容是HTML文本、响应头Content-Type为text/html：属于路由规则配置错误，静态资源请求被错误返回了首页内容
• 若返回状态码为403：属于服务器文件权限问题

二、构建环节校验 #

• 检查项目根目录vite.config.js中的base配置项：项目部署在域名根路径时配置为'/'即可；如果部署在子路径下，必须配置为对应的子路径前缀，否则构建生成的资源引用路径会全部失效。
• 执行构建命令npm run build后，本地运行npx serve dist启动静态服务预览dist产物，确认本地访问构建产物无报错，排除构建环节本身的问题。

三、Nginx配置校验（占同类问题80%以上） #

• 确认Nginx配置中的root字段精确指向dist文件夹的绝对路径，例如dist存放在/var/www/your-project/dist，root必须配置到dist这一层，不能指向dist的上级目录。
• 必须配置SPA路由回退规则，否则不仅子路由刷新会返回404，静态资源路径匹配失败时也会被错误返回首页内容，最小可用配置参考：

server {
  listen 80;
  server_name 你的公网IP/绑定域名;
  root /var/www/your-project/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

• 确认Nginx主配置（通常为/etc/nginx/nginx.conf）的http块中引入了MIME类型映射：include /etc/nginx/mime.types;，保证.js资源返回的Content-Type为application/javascript、.css资源返回text/css，MIME不匹配会直接导致浏览器拒绝加载资源。
• 检查dist文件夹的系统权限，保证Nginx运行用户对dist目录及内部所有文件有读权限，可执行chmod -R 755 /var/www/your-project/dist统一设置可读权限。
• 配置修改完成后先执行nginx -t校验语法是否正确，再执行nginx -s reload重载配置生效。

四、EC2及链路层校验 #

• 检查EC2绑定的安全组规则，确认80（HTTP）、443（HTTPS）端口的入站流量对访问源开放，没有被系统防火墙或安全组拦截。
• 如果EC2前挂载了CloudFront等CDN服务，部署新版本后要手动刷新CDN缓存，避免CDN返回历史的错误响应。
• 可在EC2实例内部执行curl http://localhost/出问题的静态资源路径.js，核对本地访问返回的内容是否为正确的脚本代码，排除外部链路的拦截问题。

内容的提问来源于stack exchange，提问作者chance-up choi