Angular项目部署时无法访问assets目录下JSON文件问题排查

1. 修正请求URL路径 #

你当前的请求路径www/dist/assets/languages/xxx.json存在错误。Angular项目打包后，assets目录会直接位于构建产物（dist）的根目录下，和index.html同级。正确的请求路径应该以根相对路径开头，修改后的代码如下：

getLanguage() {
  let language = localStorage.getItem('language') || 'english';
  return this.http.get(`/assets/languages/${language}.json`);
}

2. 确认Angular打包配置 #

检查angular.json中的assets配置项，确保assets/languages目录被正确纳入打包资源：

"assets": [
  "src/favicon.ico",
  "src/assets"
],

如果单独指定子目录，需明确添加"src/assets/languages"，否则打包时该目录不会被复制到dist文件夹中。

3. 核对服务器实际文件路径 #

结合你提供的文件路径，确认服务器部署的根目录是否指向dist文件夹。如果服务器以www/dist作为站点根目录，那么JSON文件的实际访问路径就是/assets/languages/english.json，无需额外添加www/dist前缀。

4. 查看浏览器错误日志 #

打开浏览器开发者工具（F12），切换到Network面板，找到该JSON请求，查看状态码：

• 404：路径错误或文件不存在，对照上述步骤修正路径或确认文件存在性
• 403：服务器权限限制，检查JSON文件的访问权限（如Nginx/Apache是否允许静态JSON文件访问）
• 跨域错误：需配置服务器CORS规则，确保请求在同域下发起

5. 直接测试文件访问 #

在浏览器地址栏输入预期的完整URL（如http://你的域名/assets/languages/english.json），如果能正常返回JSON内容，说明是代码路径问题；如果不能，则是服务器部署或文件本身的问题。

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