Polymer构建后部署至服务器出现资源加载失败问题求助

嘿，我当初刚接触Polymer部署的时候也踩过一模一样的坑，给你几个实用的排查和解决办法，应该能帮你搞定：

1. 修正资源路径为相对路径 #

Polymer build默认生成的路径可能是基于本地开发环境的绝对路径（比如带/poly-app/前缀），但部署到服务器后，目录结构大概率不一样，导致资源找不到。

• 你可以手动修改index.html里的所有资源引用，把绝对路径改成相对路径：比如把 <link rel="import" href="/poly-app/bower_components/polymer/polymer.html"> 改成 <link rel="import" href="bower_components/polymer/polymer.html">。
• 更省心的办法是重新执行build命令时指定--base-path参数，比如如果你的应用部署在服务器的根目录，就用：

  polymer build --base-path /
  

  如果是部署在服务器的子目录（比如/my-poly-app/），就改成：

  polymer build --base-path /my-poly-app/
  

  这样build出来的index.html会自动生成适配的路径，不用手动改。

2. 确保服务器正确处理Web Components相关文件 #

有些服务器默认的MIME类型配置不支持Web Components需要的文件类型，导致资源加载时被浏览器拒绝：

• 比如Apache服务器，你可以在应用根目录创建.htaccess文件，添加以下配置：

  AddType text/html .html
  AddType application/javascript .js
  AddType application/json .json
  AddType text/css .css
  

• 如果是Nginx服务器，在你的server配置块里补充MIME类型设置：

  types {
      text/html html;
      application/javascript js;
      application/json json;
      text/css css;
  }
  

  这样服务器就能正确返回资源的Content-Type，避免浏览器因类型错误拒绝加载。

3. 验证Build产物的完整性 #

有时候build过程可能因为依赖缺失或报错，导致部分资源没有被正确生成或复制：

• 先删除本地的/poly-app/build目录，重新执行polymer build，仔细看控制台有没有报错信息，确保所有依赖都被正确打包。
• 如果你的Polymer版本支持，试试用--bundle参数打包所有资源：

  polymer build --bundle
  

  这个命令会把多个组件文件合并成少数几个bundle，减少路径问题的概率，也能提升加载速度。

4. 利用浏览器开发者工具定位具体错误 #

打开浏览器的开发者工具（按F12），切换到Network标签页，刷新页面后看哪些资源显示404状态码：

• 如果是某个组件文件找不到，检查服务器上对应的文件是否存在，以及index.html里的引用路径是否和服务器上的目录结构匹配。
• 如果是ES模块加载失败，确认服务器支持application/javascript类型，且你的Polymer版本和浏览器兼容性匹配。

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