vue2-google-与 Nuxt2 的映射（config.externals 未定义）

Question

我正在尝试开箱即用地一起使用 Nuxt2 和 vue2-google-maps。我遵循了自述文件中的说明，如 here 所述，所以在我的 nuxt.config.js 中我有：

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: ['~/assets/style/app.styl'],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: ['@/plugins/vuetify', '@/plugins/gmaps'],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    vendor: ['babel-polyfill', 'vue2-google-maps'],
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }

      //add for vue2-google-maps
      if (!ctx.isClient) {
        // This instructs Webpack to include `vue2-google-maps`'s Vue files
        // for server-side rendering
        config.externals.splice(0, 0, function(context, request, callback) {
          if (/^vue2-google-maps($|\/)/.test(request)) {
            callback(null, false)
          } else {
            callback()
          }
        })
      }
    }
  }

当我运行我的代码时，我得到：

    (node:3042) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'splice' of undefined
    at Builder.extend (/Users/jamessherry/sites/nuxt-the-jump/nuxt.config.js:189:26)
    at Builder.<anonymous> (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:160:27)
    at WebpackServerConfig.extendConfig (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3144:56)
    at WebpackServerConfig.config (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3182:33)
    at WebpackServerConfig.config (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3458:26)
    at Builder.webpackBuild (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3928:52)
    at Builder.build (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3632:16)
(node:3042) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3042) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[nodemon] clean exit - waiting for changes before restart

我已经制作了一个包含所有代码和完整解释的 repo（在 README 中）here

非常感谢任何帮助！（我是nuxt的新手，所以我可能犯了一个明显的错误！）

Answer 1

该说明已过时，不适用于最新的 nuxt。您只需要将它添加到 transpile 选项

 build: {
    transpile: [/^vue2-google-maps($|\/)/]
  }

这是没有实际 api 密钥的工作示例 - https://codesandbox.io/s/31j9l75xjm

这里是重新发布的更多信息 - https://github.com/xkjyeah/vue-google-maps/issues/498

vue2-google-与 Nuxt2 的映射（config.externals 未定义）

vue2-google-maps with Nuxt2 (config.externals is undefined)

nuxt.js

vue2-google-maps