Reactjs 在使用webpack构建bundle.js时，您已经超出了生产模式下此API的每日请求配额

当我使用react项目时，我在google autocomplete上遇到了一些问题。我使用google autocomplete为react制作了一个简单的autocomplete组件

Autocomplete.js

import React，{Component}来自'React'；
导出默认类自动完成扩展组件{
初始化=（）=>{
常量输入=document.getElementById（'pac-input'）；
const autocomplete=新的google.maps.places.autocomplete（输入）；
autocomplete.addListener（'place\u changed'，（）=>{
const place=autocomplete.getPlace（）；
});
}
componentDidMount（）{
this.init（）；
}
render（）{
返回(
);
}
}

我用

网页包

用于启动和构建我的react项目。在localhost:8080端口中，autocomplete工作得很好。但是当我使用webpack构建项目并将bundle.js托管在服务器中时，我得到如下错误

您已超过此API的每日请求配额。如果未设置自定义每日请求配额，请验证您的项目是否具有活动的帐单帐户：

---

我了解到这一点，我明白我应该启用计费帐户。谷歌api的命中率有一些问题，可能会出现这个问题。但我不得不问这个问题。为什么localhost的工作方式是autocomplete perfect，当它使用bundle.js托管时，会出现上述错误。请给我一个理由

我相信localhost HTTP referer被谷歌列入了白名单，并且没有检查账单账户的存在。通过这种方式，您可以开发应用程序而无需计费，但对于生产，您必须启用计费帐户。@xomena所以您说，当我构建bundle.js时，我必须启用计费帐户。你能解释一下他们是如何确定这个项目是在生产模式下运行的吗？我想他们只是检查一下HTTP Referer。如果推荐人与本地主机不同，他们会申请检查账单帐户。哦！嗯，但我在localhost:8080网页包服务器上运行我的项目，然后在localhost:5498 iis服务器上运行项目。在iis服务器中，我使用了bundle.js文件。在localhost:8080上，它可以工作，但localhost:5498在出现该错误时不工作。所以有不同的端口和相同的本地主机，为什么呢？

import React,{Component} from 'react';

export default class Autocomplete extends Component{

init=()=>{
    const input = document.getElementById('pac-input');
    const autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.addListener('place_changed', ()=>{
        const place = autocomplete.getPlace();
    });
}

componentDidMount(){
    this.init();
}

render(){
    return(
        <div>
            <input id="pac-input" type="text" placeholder="Enter a location" />            
        </div>
    );
}
}