vue-google-charts报n.load is not a function 部署Firebase后失效怎么解决？

你查询到的.d.ts声明文件、tsconfig.json配置方案均是针对TypeScript项目的类型报错修复方案，你的项目无tsconfig.json说明是纯JavaScript项目，上述方案完全不适用，无需再尝试。

n.load is not a function报错的核心原因是vue-google-charts依赖的Google Charts官方Loader没有被正确加载，本地运行正常是因为开发环境的加载策略、网络环境可以正常拉取对应资源，部署到Firebase后出现了资源加载限制、包内置加载逻辑异常等问题，可按以下方案依次排查修复：

方案1：回退到稳定版本的vue-google-charts #

1.0.0及以上版本的vue-google-charts存在内置Loader加载异常的已知问题，先尝试回退到0.3.2稳定版本：

# 卸载当前版本
npm uninstall vue-google-charts
# 安装稳定旧版本
npm install vue-google-charts@0.3.2

安装完成后重新打包部署到Firebase测试即可。

方案2：手动预加载Google Charts Loader #

如果版本回退无效，可以手动引入官方Loader，绕过包内置的加载逻辑：

1. 在项目public/index.html的<head>标签中添加Loader资源引入：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2. 在使用GChart组件的代码中，禁用组件自动加载逻辑：

import GChart from 'vue-google-charts'
GChart.settings = { loadPackages: false }

3. 初始化图表前手动触发Loader加载：

window.google.charts.load('current', {packages: ['corechart']})
window.google.charts.setOnLoadCallback(() => {
  // 此处写入你的图表数据赋值、渲染逻辑
})

方案3：调整Firebase Hosting安全配置 #

如果上述两种方案均无效，大概率是Firebase的内容安全策略拦截了Google Charts的资源加载，修改项目根目录下的firebase.json配置即可：

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "Content-Security-Policy",
            "value": "script-src 'self' https://www.gstatic.com https://www.google.com 'unsafe-inline' 'unsafe-eval'"
          }
        ]
      }
    ]
  }
}

修改完成后重新部署Firebase即可生效。

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