无后端集成的Angular项目中.htaccess文件配置及Cache-Control缓存控制问题求助

我来帮你解决这个.htaccess缓存配置的问题，看起来核心问题出在文件位置和Angular构建配置上，咱们一步步来排查修复：

你的.htaccess放在src/.htaccess并加入assets数组，编译后会被放到dist/assets/.htaccess，但Apache只会读取网站根目录（也就是dist文件夹的根）的.htaccess文件，子目录里的配置不会被自动应用，这就是为什么缓存规则没生效的主要原因。另外，开发环境的ng serve不支持.htaccess，必须部署到Apache服务器才能测试效果。

1. 调整.htaccess的位置与构建配置 #

• 把.htaccess文件从src目录移动到项目根目录（和angular.json同级的位置）。
• 修改angular.json的assets配置，确保构建时把.htaccess复制到dist的根目录：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    { "glob": ".htaccess", "input": "./", "output": "./" }
  ]
  

  这样执行生产构建后，.htaccess会出现在dist/.htaccess，也就是Apache服务器需要的根目录位置。

2. 优化你的.htaccess缓存规则 #

你的现有规则没问题，但可以补充一些细节，比如区分静态资源的缓存时长，同时确保mod_headers模块生效：

<IfModule mod_headers.c>
    # 图片、图标等静态资源：长期缓存（加immutable避免浏览器验证）
    <FilesMatch "\.(ico|jpg|jpeg|png|gif|webp|svg)$">
        Header set Cache-Control "max-age=31536000, public, immutable"
    </FilesMatch>
    # CSS、JS：利用Angular哈希后缀设置长期缓存
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
    # 文档类资源
    <FilesMatch "\.(pdf|flv|swf)$">
        Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
</IfModule>
# 可选：启用mod_expires作为补充（和mod_headers搭配更稳妥）
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>

提示：Angular生产构建会给JS/CSS文件加上唯一哈希后缀（比如main.abc123.js），所以设置长期缓存完全没问题，文件更新后哈希变化会自动触发新请求。

3. 确保Apache服务器配置正确 #

• 启用必要的模块：
  • Linux系统：执行sudo a2enmod headers expires rewrite
  • Windows系统：打开httpd.conf，取消注释以下两行：

    LoadModule headers_module modules/mod_headers.so
    LoadModule expires_module modules/mod_expires.so
    LoadModule rewrite_module modules/mod_rewrite.so
    

• 确保网站目录允许.htaccess生效：在Apache的虚拟主机配置或httpd.conf中添加：

  <Directory "/path/to/your/dist/folder">
      AllowOverride All
      Require all granted
  </Directory>
  

  替换/path/to/your/dist/folder为你实际部署dist文件夹的路径。

4. 测试验证 #

• 执行生产构建：ng build --configuration production
• 把dist文件夹部署到Apache服务器
• 打开Chrome DevTools（F12）→ 切换到Network面板，先按Ctrl+F5强制刷新一次（清除旧缓存），再正常刷新页面，查看静态资源的Response Headers，确认Cache-Control是否显示为设置的max-age=31536000, public等。

• 开发环境（ng serve）：Webpack开发服务器不支持.htaccess，所以在开发时看不到缓存效果，必须部署到Apache测试。
• 浏览器缓存：如果之前有旧的缓存记录，测试前要清空浏览器缓存，或者打开隐身窗口测试。

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