Ionic3 Google Maps在Windows服务器正常，Ubuntu服务器无法显示

我之前部署Ionic项目到Linux服务器时也碰到过几乎一模一样的问题，结合你描述的症状，咱们一步步来拆解解决：

一、先搞定资源404的核心问题 #

你提到字体、图片、config.xml都报404，这大概率是路径配置或文件权限的问题：

• 先检查EC2上Apache的文档根目录和文件权限：
  确保/var/www/下的所有文件都属于Apache的运行用户（一般是www-data），执行以下命令修正权限：

  sudo chown -R www-data:www-data /var/www/
  sudo chmod -R 755 /var/www/
  

• 重新构建生产版本的项目：
  你之前用的ionic cordova build browser是开发构建，路径配置和资源打包都偏开发环境，换成生产构建命令：

  ionic cordova build browser --prod --release
  

  把新构建的./platforms/browser/www目录内容重新同步到EC2的/var/www/下。
• 检查index.html里的资源引用：
  打开/var/www/index.html，确认所有资源（比如assets/fonts/xxx.ttf）都是相对路径，不要用绝对路径（比如/assets/...可能在Apache下会指向根目录外）。

二、消除StatusBar不支持的错误 #

cordova-plugin-statusbar是给iOS/Android移动平台用的，浏览器平台根本没有StatusBar这个API，所以报错是正常的，咱们在代码里加个平台判断就行：

• 在你的根组件（比如app.component.ts）里，引入Platform服务，然后只在移动平台执行StatusBar相关代码：

  import { Platform } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  
  constructor(
    private platform: Platform,
    private statusBar: StatusBar
  ) {
    this.platform.ready().then(() => {
      // 只在cordova环境且不是浏览器时执行StatusBar操作
      if (this.platform.is('cordova') && !this.platform.is('browser')) {
        this.statusBar.styleDefault();
      }
    });
  }
  

  这样浏览器环境下就不会再触发StatusBar相关代码，自然就不会报错了。

三、关闭Angular开发模式 #

控制台提示Angular处于开发模式，还是因为你用了开发构建。生产环境下必须关闭：

• 确保构建时加了--prod参数（前面已经提过），这个参数会自动启用生产模式，禁用开发环境的调试提示。
• 也可以手动检查src/environments/environment.prod.ts文件，确保production字段是true：

  export const environment = {
    production: true
  };
  

四、修复Google Maps无法显示的问题 #

Windows XAMPP正常但EC2不行，主要排查这几个点：

• API密钥IP限制：登录Google Cloud控制台，检查你的Maps API密钥是否添加了EC2实例的公网IP到允许列表里。如果密钥设置了IP白名单，而EC2的IP不在里面，Google会直接拒绝请求，导致地图加载失败。
• HTTPS/HTTP混合内容问题：如果你的EC2 Apache配置了HTTPS（或者浏览器自动跳转HTTPS），而你引入Maps的脚本是HTTP的，浏览器会拦截混合内容。把Maps的脚本链接改成HTTPS：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
  

• 地图初始化时机：确保你是在platform.ready()之后初始化Google Maps，避免DOM未完全加载导致的初始化失败。比如在页面组件里：

  ionViewDidEnter() {
    this.platform.ready().then(() => {
      // 这里初始化Google Maps
      const map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    });
  }
  

按照这个顺序排查，先解决资源加载和StatusBar的错误，再处理Maps的API和初始化问题，应该就能正常显示了。

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