如何在Hostinger上托管Angular8项目？部署dist文件夹后无法访问静态文件

一、完整部署Angular 8项目到Hostinger的步骤 #

先从基础部署流程说起，确保你走对了核心步骤：

• 本地构建生产包：打开终端进入Angular 8项目根目录，执行命令 ng build --prod。注意Angular 8的--prod构建会把编译后的文件打包到dist/你的项目名文件夹下，比如项目叫my-angular-site，最终文件就在dist/my-angular-site里。
• 上传文件到Hostinger：登录Hostinger后台打开「文件管理器」，找到public_html目录（这是Hostinger的网站根目录）。不要直接上传整个dist文件夹，而是把dist/你的项目名里的所有文件（包括index.html、css、js、assets等）全部上传到public_html中；如果是部署到子域名或子目录，就上传到对应的子目录下。
• 设置默认入口：在Hostinger的「域名管理」或「网站设置」里，确保默认首页设置为index.html——这是Angular单页应用的核心入口。

二、解决静态文件无法访问的常见问题 #

你已经上传了dist文件夹但打不开静态文件，大概率是以下几个原因，逐个排查就能解决：

• 检查文件上传路径是否正确
  确认css、js、assets这些文件夹和index.html处于同一层级（都在public_html下），没有嵌套错误。比如如果误把整个dist文件夹上传，静态文件路径会变成public_html/dist/css/...，浏览器自然找不到。
• 修正文件权限
  Hostinger服务器对文件权限有明确要求：文件夹权限设为755，文件权限设为644。如果权限不对，服务器会返回403禁止访问。在文件管理器里选中对应文件/文件夹，右键选择「更改权限」即可调整。
• 配置.htaccess实现路由重写与路径修复
  Angular是单页应用，需要配置Apache重写规则来确保路由和静态文件都能正常访问。在public_html下新建.htaccess文件，写入以下内容：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    # 允许访问实际存在的静态文件
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 所有其他请求转发到index.html，解决SPA刷新404问题
    RewriteRule . /index.html [L]
  </IfModule>
  

  Hostinger默认开启了mod_rewrite模块，如果没开可以联系客服开启。这个配置既能解决页面刷新404的问题，也能确保静态文件被正确识别。
• 检查Angular的base-href配置
  如果你的项目部署在子域名或子目录下（比如https://yourdomain.com/app/），构建时必须指定base-href，否则静态文件的路径会出错。重新构建命令应为：

  ng build --prod --base-href "/app/"
  

  这里的/app/要和你的实际部署路径完全一致，之后重新上传构建好的文件即可。
• 通过浏览器控制台定位具体错误
  打开浏览器开发者工具（按F12），切换到「Network」标签，刷新页面查看静态文件的请求状态：
  • 404错误：说明路径不对，检查base-href或上传路径；
  • 403错误：说明权限问题，修改文件权限；
  • 500错误：可能是.htaccess语法有误，检查配置内容。

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